@keyframes別動我的div

我試圖讓我的div上下移動與CSS3，但它並不@keyframes別動我的div

<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/

來源

2014-02-25 German Katz

由於您使用的是關鍵幀，是否有一個原因，您不使用CSS變換爲您的動畫，而不是動畫位置？使用translate3d之類的東西可以獲得更好的性能 –

添加到您的.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

來源

2014-02-25 00:30:39

謝謝！它的工作原理：D –

你的div需要！絕對位置！嘗試！

或應用屬性轉換，白色轉換你div.globo不需要位置abosolute！

來源

2014-02-25 00:31:36 JoseAPL

@keyframes別動我的div

回答

相關問題