0

这是我当前的代码

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

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

提前致谢 ：）

4

1 回答 1

1

我想我找到了：step-start （我认为它是动画计时功能类别中可以做到这一点的多个之一）

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

于 2012-03-07T17:03:37.513 回答