CSS3 изменение анимации фона изображения без скольжения

Question

Это текущий код у меня есть

.jack_hitting{ 
     -moz-animation: jackhitting 0.5s infinite; 
    } 

    @-moz-keyframes jackhitting { 
     0% { 
      background-position: -8px -108px; 
     } 

     20% { 
      background-position: -41px -108px; 
     } 

     40% { 
      background-position: -73px -108px; 
     } 

     60% { 
      background-position: -105px -108px; 
     } 

     80% { 
      background-position: -137px -108px; 
     } 

     100% { 
      background-position: -8px -108px; 
     } 
    } 

и эти циклы через фоновое изображение скольжения к следующему, но я предпочел бы не скользить, так что в основном работает как следующий код js:

document.getElementById('id').style.backgroundPosition='-8px -108px'; 

Есть ли эффект, который может делать то, что я хотел бы?

Заранее спасибо :)

Answer 1

Я думаю, что я нашел: шаг начать (я думаю, что это одна из нескольких, которые могли бы сделать это в анимации-синхронизации-функции категории)

animation: jackhitting 10s step-start infinite; 

Long-форма будет

animation-name: jackhitting; 
animation-duration: 10s; 
animation-timing-function: step-start; 
animation-iteration-count: infinite; 

к сожалению, вам придется префикс й для каждого браузера.

Вот скрипка, чтобы проверить это: http://jsfiddle.net/Ym6b5/4/ (The ДИВ слишком большой, я хотел, чтобы вы, чтобы увидеть движение фонового изображения и посмотреть, если это то, что вы были после.)

анимации, длительность - это общее количество времени, которое потребуется, чтобы пройти через ваши ключевые кадры. анимация-задержка, о которой я думал, была задержка между шагами: задержка до анимация должна начинаться. http://dev.w3.org/csswg/css3-animations

Надеюсь, это то, что вы искали. Cheers, iso