[分享]css关键帧动画怎么设置顺序

CSS关键帧动画是一个非常有用的特性，可以用来制作精美的动画效果。但是，当我们需要设置多个关键帧动画时，如何控制它们的顺序呢？下面就让我们来学习一下如何设置关键帧动画的顺序。/ 创建动画关键帧 / k...

CSS关键帧动画是一个非常有用的特性，可以用来制作精美的动画效果。但是，当我们需要设置多个关键帧动画时，如何控制它们的顺序呢？下面就让我们来学习一下如何设置关键帧动画的顺序。

/* 创建动画关键帧 */
@keyframes fadeIn {
   from {opacity: 0;}
   to {opacity: 1;}
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* 设置动画顺序 */
.box1 {
  animation: fadeIn 1s ease-in-out 0s 1 normal forwards, slideInLeft 1s ease-in-out 1s 1 normal forwards;
}

.box2 {
  animation: slideInLeft 1s ease-in-out 1s 1 normal forwards, fadeIn 1s ease-in-out 0s 1 normal forwards;
} 

上面的代码中，我们创建了两个关键帧动画：fadeIn和slideInLeft。接着，在.box1和.box2类中，我们使用animation属性来设置了动画的顺序。

在.box1中，我们首先播放fadeIn动画（delay为0），动画结束后再播放slideInLeft动画（delay为1s）。

而在.box2中，我们则先播放slideInLeft动画（delay为1s），再播放fadeIn动画（delay为0）。

需要注意的是，我们在animation属性中对每个动画都设置了forwards参数，这是为了确保动画结束后，元素将保持在最后一个关键帧的状态。如果我们想让动画在播放完后返回到初始状态，可以使用backwards参数；如果想要既回到初始状态又保持最后一个关键帧的状态，可以使用both参数。

总之，通过设置每个关键帧动画的delay和forwards参数，我们可以控制它们的播放顺序，并创造出惊艳的动画效果。