CSS3动画变化无滑动

背景图像这是当前代码我有CSS3动画变化无滑动

.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';

有没有一种效果可以做我想做的？

感谢提前:)

来源

2012-03-07 Lennart Hase

我对-moz-animation的细节不太了解，但基于https://developer.mozilla.org/en/CSS/animation，它似乎可以得到你想要的东西一个0的动画持续时间和X秒的动画延迟 – isotrope 2012-03-07 15:59:49

不，那也行不通：，你有我希望那里：D – 2012-03-07 16:11:11

我想我找到它：步启动（我认为这是多重的一个可以在动画定时功能做到这一点类）

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/ （股利是太大了，我想你看到背景图像移动，看看它是否是你所追求的。）

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

希望这是你在找什么。干杯， iso

来源

2012-03-07 17:03:37 isotrope

谢谢，我会测试它，但jsfiddle表明它是可能的 – 2012-03-08 22:11:33

测试它，它的工作辉煌，你是一个天才:) – 2012-03-09 13:41:08

我很开心看起来。感谢您的机会。 ;）StackOverflow的部分乐趣在于研究两周内最终使用的内容。 – isotrope 2012-03-09 14:37:35

CSS3动画变化无滑动

回答

相关问题