CSS 同时播放多个CSS动画

在本文中，我们将介绍如何使用CSS同时播放多个CSS动画。

阅读更多：CSS 教程

什么是CSS动画

CSS动画是使用CSS属性和关键帧来创建平滑过渡和动画效果的方法。它可以应用于HTML元素，使其在一定时间内改变样式，创造出动态的效果。CSS动画可以使网页更加生动活泼，并增加用户体验。

如何播放多个CSS动画

要同时播放多个CSS动画，我们可以使用多个关键帧动画或CSS过渡效果，并将它们应用于相同的HTML元素或不同的HTML元素。

方式一：应用多个关键帧动画

关键帧动画是通过在关键帧（起始帧、中间帧、结束帧）定义不同的CSS样式实现的。我们可以为同一个HTML元素创建多个不同的关键帧动画，并使用animation属性将它们应用于元素。

@keyframes animation1 {
  0% { transform: translateX(0px); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0px); }
}

@keyframes animation2 {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.element {
  animation: animation1 2s infinite, animation2 1s infinite alternate;
}

在上面的示例中，我们创建了两个关键帧动画animation1和animation2，并将它们应用于class为element的HTML元素。animation1将元素在水平方向上来回移动，而animation2使元素在不透明度上闪烁。这样，两个动画将同时播放。

方式二：为不同元素应用不同动画

除了在同一个HTML元素上应用多个动画，我们还可以为不同的HTML元素分别应用不同的动画。这样可以在页面上创建更多元素之间的动态效果。

@keyframes animation1 {
  0% { transform: translateY(0px); }
  50% { transform: translateY(100px); }
  100% { transform: translateY(0px); }
}

@keyframes animation2 {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.element1 {
  animation: animation1 2s infinite;
}

.element2 {
  animation: animation2 1s infinite alternate;
}

在上述示例中，我们创建了两个关键帧动画animation1和animation2，并将它们分别应用于class为element1和element2的两个不同HTML元素。animation1使element1在垂直方向上来回移动，而animation2使element2在大小上做放大缩小的动画。这样，两个元素将同时播放各自的动画。

CSS动画同时播放的效果

通过同时播放多个CSS动画，我们可以创造更加生动有趣的效果。例如，我们可以通过同时应用平移和旋转动画，在网页上创建一个旋转的飞行器。

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

@keyframes fly {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-200px); }
}

.aircraft {
  animation: rotate 3s infinite linear, fly 3s infinite alternate;
}

在上面的例子中，我们定义了两个关键帧动画rotate和fly，并将它们应用于class为aircraft的HTML元素。rotate使飞行器无限旋转，fly使飞行器上升和下降。通过同时播放这两个动画，我们实现了一个飞行器在同时旋转和上下移动的效果。