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