CSS 同时播放多个CSS动画

在本文中，我们将介绍如何使用CSS同时播放多个CSS动画。CSS动画可以为网页添加生动和有趣的效果，通过同时播放多个动画，可以创建更加复杂和炫目的效果。

阅读更多：CSS 教程

使用嵌套选择器

在CSS中，可以使用嵌套选择器来同时播放多个动画。嵌套选择器是指一个选择器嵌套在另一个选择器内部，它们之间通过空格分隔。通过嵌套选择器，可以为同一个元素同时应用多个动画。

.box {
  animation: rotate 3s infinite, scale 2s infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes scale {
  0% { transform: scale(1); }
  100% { transform: scale(2); }
}

在上面的例子中，我们使用了两个动画 rotate 和 scale 来同时对 .box 元素进行动画处理。rotate 动画使元素按照圆周路径旋转，而 scale 动画使元素放大两倍。通过在 animation 属性中同时定义这两个动画，我们实现了同时播放多个CSS动画。

关键帧动画

除了使用嵌套选择器，我们还可以使用关键帧动画来同时播放多个CSS动画。关键帧动画是一种基于动画帧的技术，可以在动画的不同时间点定义不同的样式。

.box {
  animation: custom 4s infinite;
}

@keyframes custom {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

在上面的例子中，我们定义了一个关键帧动画 custom，用于将元素按照一定的旋转路径进行动画处理。通过在 @keyframes 声明中定义不同的关键帧样式，我们可以实现在不同的时间点产生不同的效果。通过将多个关键帧动画应用于同一个元素的 animation 属性中，可以实现同时播放多个CSS动画。

动画延迟和持续时间

如果你希望多个CSS动画在不同的时间点进行播放，并且持续时间不同，你可以使用动画的延迟和持续时间属性。通过调整这些属性的值，可以实现多个动画在不同的时间点开始，并且持续时间不同。

.box {
  animation: rotate 2s infinite, scale 3s infinite;
  animation-delay: 0s, 1s;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes scale {
  0% { transform: scale(1); }
  100% { transform: scale(2); }
}

在上面的例子中，我们定义了两个动画 rotate 和 scale，并将它们应用到同一个元素的 animation 属性中。通过设置 animation-delay 属性，我们使 scale 动画在 rotate 动画开始后延迟1秒钟开始。这样，就可以实现多个CSS动画在不同的时间点进行播放。