css - 为什么动画迭代不能延迟？

我一个接一个地开始两个css动画，并为此使用animation-delay。但是然后我为animationation 1和animation-2编写animation-iteration-count，它仅适用于animation-2。
而且我不想只使用％，从-到。

#body1 {
    animation-name: animation-1, animation-2;
    animation-duration: 2s, 4s;
    animation-delay: 0s, 2s;
    animation-iteration-count: 2,2;
}
@keyframes animation-1 {
	from { transform: translate3d(0px, 0px, 0px); }
	to { transform: translate3d(0.5px, -.2px, 0px); }
}
@keyframes animation-2 {
	from { transform: translate3d(0.5px, -.2px, 0px); }
	to { transform: translate3d(0px, -0.5px, 0px); }
}

最佳答案

animation-delay属性仅延迟动画的初始开始，但是在动画开始后它将连续运行。

现在，当动画第二次开始时，它将不执行animation-1，而仅执行animation-2（原因是animation-2的动画声明将被animation-1覆盖，因为两者将同时开始）。

您可以使用％值解决此问题。仅使用from和to值是不可能的。

（也就是说，使用%值在动画之间添加延迟）。

更好的代码版本如下：
（删除2个动画，只让一个动画声明完成这项工作）

#body1 {
    animation-name: animation-1;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: 2;
}
@keyframes animation-1 {
  0% { transform: translate3d(0px, 0px, 0px); }
  50% { transform: translate3d(0.5px, -.2px, 0px); }
  50% { transform: translate3d(0.5px, -.2px, 0px); }
  100% { transform: translate3d(0px, -0.5px, 0px); }
}

关于css - 为什么动画迭代不能延迟？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55373527/