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>

我要在animation1完成后开始animation2。我不想像0％，50％，100％这样划分一个动画或使用其他动画的动画持续时间。我想获取动画完成信息并使用它。我不想使用延迟。有可能吗？

Answer 1

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

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

100% {
    top: 200px;
}
}