Question

我有动画精灵和css步骤，在Firefox和Explorer11上测试时，我明白它不像Chrome一样。

我有如下的动画

@keyframes sprite {
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}

我的精灵是垂直的。我在元素上有这样的动画

-webkit-animation: sprite 3.5s steps(60) infinite; // the frame count is minus - from original frame count
-moz-animation: sprite 3.5s steps(60) infinite;
-ms-animation: sprite 3.5s steps(60) infinite;
-o-animation: sprite 3.5s steps(60) infinite;
animation: sprite 3.5s steps(60) infinite;
background: url(images/sprites/solutions/solution_2_61square_450-min.png) no-repeat 0 0% !important;
background-size: 100% !important;

所以所有人都在资源管理器中摇晃，不在Firefox中玩。

知道为什么吗？

查看工作演示https://jsfiddle.net/anahitdev/02kmpr6u/ 感谢

Answer 1

将关键帧css代码更改为此代码，因此它将支持所有代码浏览器。

@keyframes sprite {
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}
@-webkit-keyframes sprite {/* Chrome and Safari*/
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}
@-moz-keyframes sprite { /* Mozilla Firefox */
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}
@-ms-keyframes sprite { /*Internet Explorer*/
 from { background-position: 0 0%; }
 to { background-position: 0 100%; }
}

在资源管理器中使用步骤抖动/抖动的Css动画，不在Firefox中播放

1 个答案: