我正在使用带有步骤的css动画......我的问题是:
当step()==(帧长度-1)时,一切都流畅,我看不到最后一帧
当step()==帧长度时,我仍然看不到最后一帧,动画很乱......
我正在寻找一种方法来使用100%的背景(或至少解释为什么它不起作用),因为我可以使用不同帧数的精灵,只需使用step()来调整到实际的精灵..
演示:
#sprite1, #sprite2, #sprite3 {
height: 41px;
width: 41px;
background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') 0 center;
}
#sprite1 {
animation: sprite 1s steps(3) infinite;
}
#sprite2 {
animation: sprite 1s steps(4) infinite;
}
#sprite3 {
animation: sprite2 1s steps(4) infinite;
}
@keyframes sprite {
100% { background-position: right center; }
}
@keyframes sprite2 {
100% { background-position: 164px center; }
}
Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>
答案 0 :(得分:1)
必需。动画持续时间的百分比。 法律价值观:
0-100% 来自(相同为0%) 至(相同为100%)
注意:您可以在一个动画中拥有许多关键帧选择器。
精神图像4开始50%所以我给了。检查以下示例代码。
#sprite1, #sprite2, #sprite3 {
height: 41px;
width: 41px;
background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') 0 center;
}
#sprite1 {
animation: sprite 1s steps(3) infinite;
}
#sprite2 {
animation: sprite3 1s steps(3) infinite;
}
#sprite3 {
animation: sprite2 1s steps(4) infinite;
}
@keyframes sprite {
60% { background-position: right center; }
}
@keyframes sprite2 {
100% { background-position: 164px center; }
}
@keyframes sprite3 {
50% { background-position: right center; }
}
&#13;
Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>
&#13;
答案 1 :(得分:1)
您需要将初始位置更改为background-position:-33% center;
而不是background-position: 0 center;
在这种情况下,这四个步骤将如下工作:
step1:background-position: -33% center;
将显示img4
第2步:background-position: 0% center;
将显示img1
第3步:background-position: 33% center;
将显示img2
第4步:background-position: 66% center;
将显示img3
#sprite1 {
height: 41px;
width: 41px;
background: url('https://img4.hostingpics.net/thumbs/mini_756487pacanim2.png') -33% center;
}
#sprite1 {
animation: sprite 1s steps(4) infinite;
}
@keyframes sprite {
100% { background-position: right center; }
}
&#13;
<div id="sprite1"></div>
&#13;
答案 2 :(得分:1)
尝试一下:
10 =帧/步; 对于Edge,您必须计算百分比;
@keyframes sprite{
100%{
background-position: calc(100% / (10 - 1) * 10) 0;
background-position: 111.111% 0;/* Edge/IE */
}
}
#container {
width: 50px;
height: 72px;
animation: container 1s linear infinite;
}
@keyframes container {
50% {
width: 72px;
height: 50px;
}
}
#sprite {
width: 100%;
height: 100%;
background-color: red;
background-image: url(http://i.imgur.com/xtk0SCC.png);
background-position: 0% 0;
background-size: calc(100% * 10) 100%;
background-repeat: no-repeat;
animation: sprite 1s steps(10) infinite;
}
@keyframes sprite {
100% {
background-position: calc(100% / (10 - 1) * 10) 0;
background-position: 111.111% 0;/* Edge/IE */
}
}
<div id="container">
<div id="sprite"></div>
</div>