CSS3动画中的闪烁

Question

CSS3动画中的闪烁

3

在动画实际开始之前，从目标点到初始点有一闪而过的动画。如果第二次运行，这是明显的。

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

@-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;
}

- Ratish

请参见"问题标题中是否应包含“标签”？"，共识是“不应该”！ - user57508

尽管CSS动画闪烁可能是一个常见问题，但缓解的一种方法是在元素上实例化硬件加速，使用translate3d(0, 0, 0)。http://davidwalsh.name/translate3d - robabby

我尝试使用translate3d（0，0，0），但动画根本不播放。点击按钮后，只有动画的结束位置可见。 - Ratish

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vals · Accepted Answer

在“动画时间函数”中，步骤属性有点误导人。如果你有20个图像，则步数不是20，而是19。对于较小的数字更清晰。如果只有2个状态，则步骤数为1。

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

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

在这里，您可以看到两个动画并排。请注意，在左侧（原始）动画中，存在错误帧，在右侧动画中未出现。

@-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>