I've been attempting to create a div that moves up and down using CSS3, but unfortunately it's not working properly.
<div class="globo"></div>
@-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;
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;
}
If you'd like to take a look at my code, you can find it here: http://jsfiddle.net/LGMv7/1/