[分享]css两个动画顺序衔接

使用CSS创建动画给网站带来了无限的创意，不仅能够增加网站的吸引力，还能够提高用户的体验感。要使两个不同的CSS动画顺序衔接起来，我们需要使用一些技巧。首先，我们需要使用关键字“animationfi...

使用CSS创建动画给网站带来了无限的创意，不仅能够增加网站的吸引力，还能够提高用户的体验感。要使两个不同的CSS动画顺序衔接起来，我们需要使用一些技巧。

首先，我们需要使用关键字“animation-fill-mode”，它会使动画停止后保持结束状态，而不是返回起始状态。我们可以设置为“forwards”，这样动画就会结束时保持最后的状态。

.animation1 {
  animation-name: expand;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.animation2 {
  animation-name: fade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
} 

接下来，我们需要设置第二个动画的延迟时间，使其在第一个动画完成后开始运行。我们可以使用“animation-delay”属性，设置延迟时间的值为第一个动画的持续时间。

.animation2 {
  animation-name: fade;
  animation-duration: 1s;
  animation-delay: 1s; /* 第一个动画的持续时间 */
  animation-fill-mode: forwards;
} 

最后，在第二个动画结束时，我们可以使用“animation-end”事件来添加一些额外的特效或操作，以确保动画完全流畅。例如，我们可以使元素在动画结束时闪烁。

.animation2 {
  animation-name: fade;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.animation2::animationend {
  animation-name: blink;
  animation-duration: 0.5s;
} 

以上是实现两个动画顺序衔接的基本方法。使用这些技巧，我们可以将CSS动画布置得更加流畅和吸引人。