html - css steps() @keyframes 百分比动画

Question

是否可以创建像这样的 CSS Sprite 步骤动画:

.something {
  animation: play .8s steps(10);
}

但是从 50% 到 80% 的动画时间开始？

0% - animation paused;
50% - animation playing with steps(10);
80% - animation paused;
100% animation paused;

这是与第二个动画同步所必需的

Answer 1

由于我们没有太多信息，因此很难找到解决方案，但我认为我有您需要的信息，至少可以让您走上正确的道路:

您可以通过向animation 属性添加第二个时间值来延迟动画。我认为您可能想使用它并使用 @keyframes。

假设您的第一个动画(这个动画必须与之同步)的时长为 5 秒，而第二个动画必须在 2 秒后运行 0.5 秒。

=== 选项 1 ===

@keyframes animation2 {
  0% {
     /*first step*/
  }
  10% {
     /*second step*/
  }
  ....
  90% {
     /*ninth step*/
  }
  100% {
     /*tenth step*/
  }
}

在您的 CSS 类 .something 中，您希望该动画运行 0.5 秒但仅在 2 秒后运行，因此您执行以下操作:

.something {
   animation: animation2 .5s 2s; /*animation takes .5 seconds, starts after 2 seconds */
}

=== 选项 2 ===

您可以使用animation-iteration-count。将 animation: play .8s 与 2 秒延迟(我从上面选项 1 自己的示例中获取)和 10 次迭代计数相结合，动画应运行 10 次然后停止。

您的 CSS 可能看起来像这样:

.something {
   animation: play .5s 2s; /*animation takes .5 seconds, starts after 2 seconds */
   animation-iteration-count: 10; */animation repeats 10 times, but the delay is ignored */
}

@keyframes play {
   0% {}
   ...
   100% {}
}

我希望这能把你推向正确的方向:)