Question

是否可以创建CSS精灵步骤动画，如：

.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秒（我从OPTION 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% {}
}

我希望这会把你推向正确的方向：）

css steps（）@ keyframes百分比动画

1 个答案: