CSS3动画在不滑动的情况下更改背景图像

CSS3 animation change background-image without sliding

本文关键字：情况下 背景 图像 动画 CSS3      更新时间：2023-09-26

这是我拥有的当前代码

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

有没有一种效果可以达到我想要的效果？

提前感谢：）

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

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

相关文章：