[分享]css3按顺序执行动画

CSS3是现代网页设计中不可或缺的一部分。除了常见的样式调整外，CSS3还引入了许多动画效果，可以让网页设计更加生动活泼。本文将介绍如何使用CSS3按顺序执行动画。 在CSS3中，要想实现按顺序执行动...

CSS3是现代网页设计中不可或缺的一部分。除了常见的样式调整外，CSS3还引入了许多动画效果，可以让网页设计更加生动活泼。本文将介绍如何使用CSS3按顺序执行动画。
在CSS3中，要想实现按顺序执行动画，需要用到两个属性：animation和animation-delay。animation属性用于定义动画执行的各个关键帧，而animation-delay用于定义动画开始执行的时间。下面是一个例子：

p {
  animation: fadeOut 1.5s forwards;
}
<br>
p:nth-child(2) {
  animation: fadeInBottom .8s .8s forwards;
}
<br>
p:nth-child(3) {
  animation: zoomIn .8s 1.6s forwards;
}
<br>
@keyframes fadeOut {
  100% { opacity: 0; }
}
<br>
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% { opacity: 1; }
}
<br>
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  100% { opacity: 1; }
} 

在这个例子中，我们定义了三个 <p> 元素，分别执行了不同的动画。第一个 <p> 元素使用了 fadeOut 动画，设置了动画执行时间为1.5秒。第二个 <p> 元素使用了 fadeInBottom 动画，设置了动画执行时间为0.8秒，延迟执行时间为0.8秒，可以看出它是在第一个动画执行完后再开始执行的。第三个 <p> 元素使用了 zoomIn 动画，设置了动画执行时间为0.8秒，延迟执行时间为1.6秒，也就是在第二个动画执行完后再开始执行的。
需要注意的是，这里设置的动画执行时间、延迟执行时间都是相对值，可以根据需要进行调整。此外，还需要使用 @keyframes 关键字定义各个关键帧，确定动画执行过程中元素的各个状态。在这个例子中，我们定义了三个关键帧，即第一个动画从100%开始，逐渐调整透明度到0；第二个动画从0%开始，调整元素的透明度和位置；第三个动画从0%开始，调整元素的透明度和尺寸。
总之，利用 animation 和 animation-delay 属性，我们可以轻松实现按顺序执行动画的效果，让网页设计更加生动有趣。