CSS3两个动画顺序衔接播放

在CSS3中，要使两个动画顺序播放，可以使用animation-delay属性来设置动画开始的延迟时间。这样，第二个动画可以在第一个动画完成后开始。

以下是一个简单的例子，演示了如何使用animation-delay来实现这一效果：

/* 定义第一个动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 定义第二个动画 */
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
 
/* 应用动画到元素上 */
.element {
  /* 第一个动画 */
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards; /* 保持动画结束状态 */
 
  /* 第二个动画 */
  animation-name: slideIn;
  animation-duration: 1s;
  animation-delay: 2s; /* 设置第二个动画开始的延迟 */
  animation-fill-mode: forwards; /* 保持动画结束状态 */
}

在这个例子中，.element将先执行fadeIn动画2秒钟，然后在动画结束后延迟2秒开始执行slideIn动画。通过设置animation-fill-mode为forwards，动画结束时元素将保持最后一帧的状态。