CSS如何在一个关键帧动画完成后开始另一个关键帧动画?

Question

如何在一个关键帧动画完成后启动另一个关键帧动画？

#myDiv {
position: relative;
width: 100px;
height: 100px;
border: 1px solid;
animation-name: animation1;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes animation1 {
0% {left: 100px}
100% {left: 200px}
}
@keyframes animation2 {
0% {top: 100px}
100% {top: 200px}
}

<div id="myDiv"></div>

我想在动画 1 完成后启动动画 2。我不想像 0%，50%、100% 这样的划分一个动画或使用其他动画的动画持续时间。我想获取动画完成的信息并使用它。我不想使用延迟。可能吗？

Answer 1

您可以使用animation-delay.如果 animation1 需要 3 秒才能完成，则应按如下方式声明 animation2

@keyframes animation2{
animation-delay : 3s;
0% {
top: 100px;
}
100% {
top: 200px;
}
}