CSS3动画中的闪烁答案

【问题标题】：Flickering in CSS3 animationCSS3动画中的闪烁
【发布时间】：2015-03-07 16:39:09
【问题描述】：

在动画实际开始之前，动画从目标点到初始点有闪烁。如果你第二次运行它，它会很明显。

我必须在同一页面上多次使用它。因此我需要它不闪烁。

@-webkit-keyframes sjl {
from {
    background-position: 0px -5000px;
}
to {
    background-position: 0px 0px;
}
}
@-moz-keyframes sjl {
from {
    background-position: 0px -5000px;
}
to {
    background-position: 0px 0px;
}
}
@-ms-keyframes sjl {
from {
    background-position: 0px -5000px;
}
to {
    background-position: 0px 0px;
}
}
@-o-keyframes sjl {
from {
    background-position: 0px -5000px;
}
to {
    background-position: 0px 0px;
}
}
@keyframes sjl {
from {
    background-position: 0px -5000px;
}
to {
    background-position: 0px 0px;
}
}
.sjl
/*Squirrel jump left*/
 {
width: 300px;
height: 250px;
-webkit-perspective: 1000; //tried to use this and the 3 lines below but in every combination, even placing it in body but doesn't solve the problem
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform:translate3d(0, 0, 0);
-webkit-animation: sjl 1.5s steps(20) alternate;
-moz-animation: sjl 1.5s steps(20) alternate;
-ms-animation: sjl 1.5s steps(20) alternate;
-o-animation: sjl 1.5s steps(20) alternate;
animation: sjl 1.5s steps(20) alternate;
background-image:url(http://s9.postimg.org/io6wluqhb/Sjl.png) !important;
position: absolute;
float: left;
top: 120px;
left: 10px;
z-index: 999;
}

【问题讨论】：

请参阅"Should questions include “tags” in their titles?"，其中的共识是“不，他们不应该”！
虽然 CSS 动画闪烁可能是一个常见问题，但尝试缓解它的一种方法是使用 translate3d(0, 0, 0) davidwalsh.name/translate3d 在元素上实例化硬件加速
我尝试使用 translate3d(0, 0, 0) ，动画根本不播放。点击按钮后，只有动画的结束位置可见

标签： jquery html css animation

【解决方案1】：

animation-timing-function中的steps属性有点误导。

如果您有 20 张图片，那么如果步数不是 20，则为 19。数字越小越清晰。如果你只有 2 个状态，那么步数只有 1。

因此，您将在动画结束时重复第一帧。

您还需要调整关键帧的background-position属性，最后一个值不应该是图像的总大小，而是到达那里的位移。另一种计算方法是，它是您当前值的 19/20。

here你可以看到两个动画，并排。请注意，在左侧（原始）中，有错误的框架，没有出现在右侧。

@-webkit-keyframes sjl {
    from {     background-position: 0px -5000px;    }
    to {        background-position: 0px 0px;    }
}
@keyframes sjl {
    from {   background-position: 0px -5000px;    }
    to {        background-position: 0px 0px;    }
}
.sjl
 {
    width: 300px;
    height: 250px;
    -webkit-animation: sjl 2s steps(20) alternate infinite;
    animation: sjl 2s steps(20) alternate;
    background-image:url(http://s9.postimg.org/io6wluqhb/Sjl.png) !important;
    position: absolute;
    z-index: 999;
}

@-webkit-keyframes sjlok {
    from {     background-position: 0px -4750px;    }
    to {        background-position: 0px 0px;    }
}
@keyframes sjlok {
    from {   background-position: 0px -4750px;    }
    to {        background-position: 0px 0px;    }
}

#ok {
    left: 300px;
    -webkit-animation: sjlok 2s steps(19) alternate infinite;
    animation: sjlok 2s steps(19) alternate;
}

<body>
    <div  class="sjl"></div>
    <div  class="sjl" id="ok"></div>
</body>

【讨论】：

非常感谢您不仅给出了答案，而且还进行了解释。再次感谢
很高兴它有帮助！