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

Question

我想弄清楚一旦整個動畫完成後循環最後2幀的最佳方式是什麼。

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

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

Answer 1

你可以通過鏈接多個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>