javascript - 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

我想我找到了它:step-start(我认为它是animation-timing-function 类别中可以做到这一点的多个之一)

animation: jackhitting 10s step-start infinite;

长格式是

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

不幸的是，您现在必须为每个浏览器添加前缀。

这里有一个 fiddle 来测试它: http://jsfiddle.net/Ym6b5/4/(div 太大了。我想让你看到背景图片移动，看看它是否是你想要的)

animation-duration 是通过关键帧所需的总时间。 animation-delay 我认为是步骤之间的延迟是动画应该开始之前的延迟。 http://dev.w3.org/csswg/css3-animations

希望这就是您要找的。干杯，异