Question

在动画实际开始之前，动画从目标点闪烁到初始点。如果你第二次运行它，它是显而易见的。

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

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

Answer 1

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

如果您有20张图片，那么如果步数不是20，那么它的数字是19。对于较小的数字，它会更清晰。如果只有2个状态，则步数仅为1.

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

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

here 您可以并排查看2个动画。请注意，在左边（原始的）中，有一个错误的框架，没有出现在右边一个。

＆＃13;

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

＆＃13;

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

＆＃13;

在CSS3动画中闪烁

1 个答案: