CSS 两个CSS动画同时执行的元素

在本文中，我们将介绍如何使用CSS在一个元素上同时执行两个CSS动画。

阅读更多：CSS 教程

CSS动画简介

CSS动画是一种可以通过CSS样式来实现动画效果的技术。使用CSS动画可以实现元素的平滑过渡、旋转、缩放、淡入淡出等效果，而不需要使用JavaScript或Flash等技术。

两个CSS动画同时执行的方法

要实现在一个元素上同时执行两个CSS动画，我们可以使用CSS的animation属性。animation属性是一个复合属性，可以同时设置多个动画效果。

示例

我们来看一个例子，假设我们有一个方块元素，我们希望它同时执行平移和旋转两个动画。

首先，我们需要定义两个CSS动画。我们可以使用@keyframes关键字定义动画的关键帧。

@keyframes translate {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

然后，我们将这两个动画通过animation属性设置到元素上。

#element {
  animation: translate 2s linear infinite, rotate 4s linear infinite;
}

在上述代码中，我们通过逗号分隔了两个动画效果，分别是translate 2s linear infinite和rotate 4s linear infinite。

translate 2s linear infinite表示元素将以2秒的时间线性地从初始位置向右平移100像素，且动画将一直无限循环执行。
rotate 4s linear infinite表示元素将以4秒的时间线性地从初始角度顺时针旋转360度，且动画将一直无限循环执行。

通过设置这样的animation属性，我们就可以实现一个元素同时执行平移和旋转两个动画的效果了。

注意事项

在使用animation属性时，我们需要注意以下几点：

如果同时设置多个动画效果，每个动画效果之间要用逗号分隔。
动画将按照animation属性中的顺序执行。如果希望两个动画同时执行，需要确保它们按照相同的顺序出现在animation属性中。
如果两个动画有相同的动画时间、动画速度和循环次数等属性，也可以将它们合并为一个动画关键字，例如animation: translate 2s linear infinite, rotate 2s linear infinite;。