css - 为什么 css 动画不适用于背景大小 100%

Question

我正在逐步处理 CSS 动画...我的问题是:

• 当 step() == (frame length -1) 除了我看不到最后一帧之外，一切都是流畅的

• 当 step() == frame length 我仍然看不到最后一帧并且动画很乱...

我正在寻找一种使用背景 100% 的方法(或者至少解释为什么它不起作用)，因为我可以将它与具有不同帧数的 Sprite 一起使用，只需使用 step() 进行调整到实际的 Sprite ..

演示:

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

Answer 1

必需。动画持续时间的百分比。合法值:

0-100%来自(与 0% 相同)至(与 100% 相同)

注意:一个动画中可以有多个关键帧选择器。

sprit image 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; }
}

Case1: <br>
<div id="sprite1"></div>
Case2:
<div id="sprite2"></div>
What it should be:
<div id="sprite3"></div>