循環與多個關鍵幀

一個CSS3動畫我設法讓多個關鍵幀動畫中扮演了一個又一個循環與多個關鍵幀

，但不能使整個循環，所以它目前播放順序一次然後它的完成，有沒有辦法讓它循環，而不使用jQuery或JavaScript來重新啓動它後，經過了n秒。

.hi { 
    width: 48px; 
    height: 48px; 
    background-image: url("http://s30.postimg.org/k4qce9z1r/warp.png"); 

    -webkit-animation: play1 0.3s 0s steps(5) forwards, play2 0.3s 0.3s steps(5) forwards, play3 0.3s 0.6s steps(5) forwards; } 

@-webkit-keyframes play1 { from { background-position-y: 0px; background-position-x: 0px; } 
    to { background-position-y: 0px; background-position-x: -240px; } } @-webkit-keyframes play2 { from { background-position-y: -48px; background-position-x: 0px; } 
    to { background-position-y: -48px; background-position-x: -240px; } } @-webkit-keyframes play3 { from { background-position-y: -96px; background-position-x: 0px; } 
    to { background-position-y: -96px; background-position-x: -240px; } }

來源

2014-02-07 Ekim

想通了自己有動畫合併爲一個塊使用，否則很短的時間背景的滾動是行之間可見。

<style> 
.hi { 
    width: 48px; 
    height: 48px; 
    background-image: url("warp.png"); 

    -webkit-animation: play1 1s 0s steps(5) infinite; 
} 

@-webkit-keyframes play1 { 
    from { background-position-y: 0px; background-position-x: 0px; } 
    33% { background-position-y: 0px; background-position-x: -240px; } 
    33.0001% { background-position-y: -48px; background-position-x: 0px; } 
    66% { background-position-y: -48px; background-position-x: -240px; } 
    66.0001% { background-position-y: -96px; background-position-x: 0px; } 
    100% { background-position-y: -96px; background-position-x: -240px; } 
}  

</style> 

<body> 

<img src="warp.png" /> 
<br><br> 
<div class="hi"></div> 

</body>

來源

2014-02-07 03:41:56 Ekim

循環與多個關鍵幀

回答

相關問題