@Keyframes不会移动我的div [英] @Keyframes don't move my div

问题描述

我试图让我的div与CSS3上下移动，但它不是

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

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

你可以在这里看到我的代码： http://jsfiddle.net/LGMv7/1/

you can see my code here: http://jsfiddle.net/LGMv7/1/

推荐答案

添加到您的.globo

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

demo

这篇关于@Keyframes不会移动我的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！