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-timing-function類別中進行的多項操作之一）

animation: jackhitting 10s step-start infinite;

長格式將是

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

不幸的是，您現在必須為每個瀏覽器添加前綴。

這是一個小提琴，可以對其進行測試： http : //jsfiddle.net/Ym6b5/4/ （div太大了。我想讓您看到背景圖像移動，看看它是否在照着您的樣子）

動畫持續時間是指遍歷關鍵幀所需的總時間。 我認為動畫延遲是步驟之間的延遲是延遲之前動畫應該開始。 http://dev.w3.org/csswg/css3-animations

希望這就是您想要的。 干杯，iso