如何重複精靈動畫中的最後兩幀

我想弄清楚一旦整個動畫完成後循環最後2幀的最佳方式是什麼。如何重複精靈動畫中的最後兩幀

例如我有8個步驟的精靈動畫。它應該從1到6一次，然後我想從7-8步驟到永遠循環。

現在我很確定它不能這樣做，所以我想也許只是動畫從1到6，然後讓jQuery替換類（有另一個精靈）在準確的時間，當第一個精靈是完整的，你怎麼看？

2017-08-15 DearBee

你絕對可以把它重複最後兩幀。請參閱本指南以獲取關於spritesheets的良好教程：http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps您需要爲兩幀部分製作單獨的動畫。您應該在雙幀動畫上設置動畫延遲，以延遲它，直到上一個動畫完成，併爲關鍵幀和背景位置設置不同的位置。 –

感謝您的回覆，我沒有線索可以這樣做，這讓事情變得更容易。 – DearBee

你可以通過鏈接多個CSS關鍵幀動畫來做到這一點。下面是一個例子，其中10步動畫播放一次超過.8s，然後包含最後2幀圖像的第二個關鍵幀動畫（loop）無限重複（初始起始延遲爲.8s）。

.hi { 
 
    width: 50px; 
 
    height: 72px; 
 
    background-image: url("http://s.cdpn.io/79/sprite-steps.png"); 
 
    animation: play .8s steps(10) 1, 
 
      loop .2s steps(2) .8s infinite; 
 
} 
 

 
@keyframes play { 
 
    from { 
 
    background-position: 0px; 
 
    } 
 
    to { 
 
    background-position: -500px; 
 
    } 
 
} 
 

 
@keyframes loop { 
 
    from { 
 
    background-position: -400px; 
 
    } 
 
    to { 
 
    background-position: -500px; 
 
    } 
 
}

<div class="hi"></div>

來源

2017-08-15 20:26:52

哈哈，謝謝你的回覆和例子，我很驚訝這樣做可以這樣做！ – DearBee

如何重複精靈動畫中的最後兩幀

回答

相關問題