JSFiddle - React, Tailwind, and code Playground

by Anupama

HTML

<div class="cont">
    <div class="bg">Text</div>
    <img class="img" id="img" src="http://lorempixel.com/350/80/" />
</div>

CSS

.cont {
    height: 300px;
    width:350px;
    position:relative;
    background-color:#cacaca;
    overflow:hidden;
}
.bg {
    width:100%;
    height:100%; 
}
.img {
    position:absolute;
    bottom:0px;
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    -webkit-transform: translateY(30px);
    -webkit-animation: moveUp 15s ease-in 2s infinite normal;
}
@-webkit-keyframes moveUp{
    0% {-webkit-transform: translateY(30px)}
    20% {-webkit-transform: translateY(0px)}
    40% {-webkit-transform: translateY(0px)}
    60% {-webkit-transform: translateY(30px)}
    80% {-webkit-transform: translateY(30px)}
	85%{-webkit-transform: translateY(100px)}
    100%{-webkit-transform: translateY(30px)}
}