css两个动画先后执行

CSS动画是页面设计中不可或缺的一部分。但是，有时候我们需要两个动画先后执行，而这往往需要一些技巧和细节。下面我们将通过一个简单的例子来介绍如何实现 CSS 两个动画的先后执行。

 .box{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation: move 2s forwards;
  }

  .box::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: red;
    animation: move 2s forwards 1s;
  }

  @keyframes move {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(200px);
    }
  } 

在上面的代码中，我们定义了一个 .box 的 div 元素，同时设置了它的动画为在 2 秒内从左往右移动。然后，我们使用伪类选择器 ::after 为 div 添加了一个小红点，同样实现了一次从左往右的移动，并设置了动画的执行时间为 2 秒，延迟执行时间为 1 秒。

但是，正如我们所说的，在 CSS 中动画的先后顺序是非常重要的，因为它直接决定了动画的效果。如果您试图在不使用任何技巧的情况下实现两个动画的先后执行，您可能会遇到一个问题，即动画会同时执行，看起来效果不太好。因此，我们需要使用一些特殊的技巧来实现两个动画的先后执行。

总的来说，您可以将两个动画分别分配给一个元素和它的伪类选择器，然后使用不同的执行时间和延迟时间来调整它们的顺序。在上面的示例中，我们通过为伪类选择器设置 1 秒的延迟时间来确保它的动画会在 div 的动画执行完毕后才开始执行。

总之，如果您想要在 CSS 中实现两个动画的先后执行，可以将它们分配给一个元素和它的伪类选择器，并使用不同的执行时间和延迟时间来调整它们的顺序。这是一种简单但非常有效的技巧，可以为您的网页动画增添更多的深度和维度。