CSS3如何实现动画顺序播放

在CSS3中，要实现动画顺序播放，可以使用animation-delay属性来控制动画的开始时间。你可以为每个动画元素设置不同的animation-delay值，以确保它们按照所需的顺序播放。

以下是一个简单的示例，展示了如何使用CSS3实现两个动画顺序播放：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Sequence</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS (styles.css):

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation1;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes animation1 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200px);
  }
}

.box:nth-child(2) {
  animation-name: animation2;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: 2s; /* 等待animation1完成后开始 */
}

@keyframes animation2 {
  0% {
    transform: translateY(-200px);
  }
  100% {
    transform: translateY(0);
  }
}

在这个示例中，我们创建了两个关键帧动画：animation1和animation2。我们将第一个.box元素的animation-delay设置为0秒，这意味着它将立即开始播放。然后，我们将第二个.box元素的animation-delay设置为2秒，这意味着它将在第一个动画完成后开始播放。

这样，两个动画将按照顺序播放。你可以根据需要调整animation-duration和animation-delay的值来控制动画的速度和顺序。