为什么动画迭代不能与延迟工作？

Question

我开始两个css-动画一个一个，并使用动画-延迟这一点。但我写动画-迭代-计数动画-1和动画-2，它只适用于动画-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); }
}

​

Answer 1

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); }
}