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

是否可以创建css sprite steps动画，如：

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

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

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

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

最佳答案

因为我们没有太多的信息，所以很难找到解决方案，但我认为我至少有必要让你走上正确的道路：
可以通过向animation-属性添加第二个时间值来延迟动画。我认为您可能需要使用它，也可以使用@keyframes。
假设你的第一个动画，这一个必须同步的动画，是5秒长，第二个动画必须在2秒后运行。5秒。
==选项1===

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

在css类中，您希望运行该动画0.5秒，但仅在2秒后运行，因此您可以执行以下操作：

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

==选项2===
您可以使用.something。将animation-iteration-count与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% {}
}

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