我如何爲所有迭代指定相同的延遲？

-2

.move 
 
{ 
 
    background-image: url("http://placehold.it/100x100"); 
 
    width: 100%; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    animation: move 1s ease 3s infinite; 
 
} 
 

 
@keyframes move 
 
{ 
 
    from{background-position: 0, 0} 
 
    to{background-position:200px,0} 
 
}

<div class="move"> </div>

您可以在第一時間看到3個秒的延遲。我希望所有迭代都有相同的延遲。有什麼辦法可以做到這一點？

編輯如果其無法使用CSS3動畫，請讓我知道一個替代解決方案

來源

2015-04-12 Gops AB

@Downvoter請指明原因 –

設置關鍵幀指定了2次相同的屬性內的延遲值

.move 
 
{ 
 
    background-image: url("http://placehold.it/100x100"); 
 
    width: 100%; 
 
    height: 300px; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    animation: move 4s ease infinite; 
 
} 
 

 
@keyframes move 
 
{ 
 
    from {background-position: 0, 0} 
 
    75% {background-position: 0, 0} 
 
    to{background-position:200px,0} 
 
}

<div class="move"> </div>

來源

2015-04-12 12:06:29 vals

謝謝。讓我試試這個。什麼可能是降低投票的原因？ –

可能它被認爲是一個非常簡單的問題。但有很多同樣容易的問題，不會得到downvoted ... – vals

謝謝男人。我想知道它是如何工作的？我不明白。請幫我解決一下這個。我可以理解動畫的75％，它將保留0 0。動畫發生在最後的25％。如果我對25,50％做同樣的事情，我會得到更多延遲嗎？是這樣嗎？ –

我如何爲所有迭代指定相同的延遲？

回答

相關問題