JSFiddle - React, Tailwind, and code Playground
HTML
<div class="globo"></div>
CSS
@-webkit-keyframes mover {
0%, 100% { top: 0%;}
50% { top: 5%; }
}
@-moz-keyframes mover {
0%, 100% { top: 0%;}
50% { top: 5%; }
}
@-o-keyframes mover {
0%, 100% { top: 0%;}
50% { top: 5%; }
}
@keyframes mover {
0%, 100% { top: 0%;}
50% { top: 5%; }
}
.globo{
float:left;
position: absolute;
height: 300px;
width: 270px;
background: url('https://lh3.ggpht.com/-hCYXxhc-U4BqD1CBVCARXlp1bPT7ci7pP1Q4NEOzIKpS8zKPfyCCQF5xjEVUf4vGrJ2=w300');
-webkit-animation: mover 5s infinite; /* Safari 4+ */
-moz-animation: mover 5s infinite; /* Fx 5+ */
-o-animation: mover 5s infinite; /* Opera 12+ */
animation: mover 5s infinite;
}