@keyframes Don't Move My Div

i'm trying to make my div moves up and down with CSS3, but it doesn't

@-webkit-keyframes mover { 0%, 100% { top: 0%;} 50% { top: 5%;

Solution 1:

Add to your .globo

position: absolute;


.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;
}

demo

Solution 2:

your div Need ! position absolute! try!

or apply the property transform, whit transform you div.globo not need position abosolute!