зацикливание CSS3 анимации с несколькими ключевыми кадрами

мне удалось сделать несколько ключевых кадров в анимации играть один за другимзацикливание CSS3 анимации с несколькими ключевыми кадрами

http://jsfiddle.net/NuMjW/

, но не может сделать весь цикл, поэтому в настоящее время он играет последовательность раз а затем его сделать, есть ли способ сделать его циклом, не используя 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

зацикливание CSS3 анимации с несколькими ключевыми кадрами

ответ

Смежные вопросы