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;

长形式

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

希望这就是你要找的东西。干杯，异

CSS3动画改变背景图像而不滑动

1 个答案: