如何用css animation实现多属性同时动画-css教程-PHP中文网

CSS多属性动画的核心在于@keyframes定义各时间点的样式状态，通过animation属性应用，实现transform、opacity等属性的同步变化，并利用百分比节点和缓动函数精确控制动画阶段；为避免性能问题，应优先使用GPU加速属性如transform和opacity，避免频繁触发布局重排，合理使用will-change，减少复杂动画叠加；除@keyframes外，transition适用于简单状态过渡，Web Animations API提供更强大的JavaScript控制能力，三者各有适用场景。

如何用css animation实现多属性同时动画

CSS

animation

登录后复制

实现多属性同时动画的核心机制，在于巧妙地利用

@keyframes

登录后复制

规则来定义元素在不同时间点（或说动画进度百分比）的样式状态。它不像

transition

登录后复制

那样只能响应单一事件并从A到B，

animation

登录后复制

赋予了我们更精细、更自由的控制权，能够编排一整套复杂的视觉序列，让多个属性在同一时间轴上协同变化，甚至可以循环往复。

解决方案

要用CSS

animation

登录后复制

实现多属性同时动画，关键在于构建一个

@keyframes

登录后复制

规则，并在其中为不同的动画进度百分比（

0%

登录后复制

到

100%

登录后复制

）定义目标元素的多个CSS属性。然后，通过

animation

登录后复制

属性将这个关键帧规则应用到目标元素上。

例如，我们想让一个元素在动画过程中同时改变它的位置、大小和透明度：

/* 定义关键帧动画 */
@keyframes multiPropertyMoveScaleFade {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
    background-color: #3498db;
  }
  50% {
    transform: translateX(100px) scale(1.2);
    opacity: 0.5;
    background-color: #e74c3c;
  }
  100% {
    transform: translateX(200px) scale(0.8);
    opacity: 1;
    background-color: #2ecc71;
  }
}

/* 将动画应用到元素 */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 50px;
  /* 应用动画：动画名称 持续时间 缓动函数 延迟 迭代次数 动画方向 填充模式 播放状态 */
  animation: multiPropertyMoveScaleFade 4s ease-in-out 0s infinite alternate forwards;
}

登录后复制

在这个例子中，

multiPropertyMoveScaleFade

登录后复制

关键帧规则定义了三个状态：

立即学习“前端免费学习笔记（深入）”；

```
0%
```
登录后复制
：初始状态，元素在原位，正常大小，完全不透明，蓝色背景。
```
50%
```
登录后复制
：中间状态，元素向右移动
```
100px
```
登录后复制
，放大
```
1.2
```
登录后复制
倍，半透明，红色背景。
```
100%
```
登录后复制
：结束状态，元素向右移动
```
200px
```
登录后复制
，缩小
```
0.8
```
登录后复制
倍，完全不透明，绿色背景。

通过在每个百分比节点同时定义

transform

登录后复制

（包含

translateX

登录后复制

和

scale

登录后复制

）、

opacity

登录后复制

和

background-color

登录后复制

，我们就实现了这些属性的同步动画。浏览器会平滑地在这三个状态之间进行插值计算，从而呈现出流畅的多属性动画效果。

如何精确控制不同动画阶段的多个CSS属性？

在我看来，精确控制多属性动画的关键在于

百分比

登录后复制

的巧妙运用，以及对

animation-timing-function

登录后复制

的理解。有时候我会觉得，初学者往往只关注

0%

登录后复制

和

100%

登录后复制

，但真正能玩出花样，让动画富有表现力的，是中间的那些百分比节点。

你可以为动画的任意阶段定义一个或多个属性的精确值。比如，你想让一个元素先快速移动，然后慢速旋转，最后再快速淡出，这些都可以在同一个

@keyframes

登录后复制

规则中实现：

@keyframes preciseControlAnimation {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  20% { /* 快速移动 */
    transform: translateX(150px) rotate(0deg);
    opacity: 1;
    /* 可以在这里加入一个特定的缓动函数，但通常animation-timing-function是全局的 */
  }
  70% { /* 慢速旋转 */
    transform: translateX(150px) rotate(360deg);
    opacity: 0.8;
  }
  100% { /* 快速淡出 */
    transform: translateX(200px) rotate(360deg);
    opacity: 0;
  }
}

.precise-animated-box {
  width: 80px;
  height: 80px;
  background-color: #9b59b6;
  margin: 50px;
  animation: preciseControlAnimation 6s ease-out forwards;
}

登录后复制

在这个例子里，

20%

登录后复制

和

70%

登录后复制

这两个中间节点起到了至关重要的作用。它们将整个动画过程分成了三个逻辑阶段，每个阶段都有其独特的属性变化节奏。从

0%

登录后复制

到

20%

登录后复制

主要是

translateX

登录后复制

的变化，

20%

登录后复制

到

70%

登录后复制

主要是

rotate

登录后复制

和

opacity

登录后复制

的变化，而

70%

登录后复制

到

100%

登录后复制

则是

opacity

登录后复制

和

translateX

登录后复制

的协同变化。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

此外，

animation-timing-function

登录后复制

属性虽然是应用于整个动画周期的，但通过在关键帧中设置不同的百分比节点，我们实际上是在改变属性值在这些节点间的插值速度。例如，

ease-in

登录后复制

会让动画开始时慢，然后加速；

ease-out

登录后复制

则相反。选择合适的缓动函数，能让动画看起来更自然，更符合物理规律。对我而言，

cubic-bezier

登录后复制

给我提供了最大的自由度，可以自定义出非常独特的动画曲线。

CSS动画多属性同时执行时，如何避免性能问题或冲突？

谈到性能，这是我做前端时特别关注的一点。多属性动画确实强大，但如果不注意，也很容易变成性能杀手。避免性能问题和冲突，主要有几个方面：

优先使用 GPU 加速属性： 浏览器渲染动画时，有些属性的变化可以直接由图形处理器（GPU）处理，效率极高，比如
```
transform
```
登录后复制
(包括
```
translate
```
登录后复制
,
```
scale
```
登录后复制
,
```
rotate
```
登录后复制
,
```
skew
```
登录后复制
) 和
```
opacity
```
登录后复制
。这些属性不会引起页面布局（layout）或绘制（paint）的重新计算，只会影响复合（composite）阶段。我一般会尽量让动画集中在这类属性上。
避免触发布局（Layout）和绘制（Paint）： 像
```
width
```
登录后复制
,
```
height
```
登录后复制
,
```
margin
```
登录后复制
,
```
padding
```
登录后复制
,
```
top
```
登录后复制
,
```
left
```
登录后复制
(当
```
position
```
登录后复制
是
```
static
```
登录后复制
以外的值时)，以及
```
font-size
```
登录后复制
,
```
color
```
登录后复制
等属性的变化，可能会导致浏览器重新计算元素的几何位置和大小，甚至重绘整个页面或部分区域。频繁地触发这些操作，尤其是在动画过程中，会显著降低性能，导致卡顿。如果非要动画这些属性，尽量减少变化的幅度或频率。
使用
will-change
登录后复制
提前告知浏览器：
```
will-change
```
登录后复制
属性是一个优化利器。它能告诉浏览器，某个元素或某些属性即将发生变化，让浏览器有机会提前进行优化，比如为该元素创建一个独立的渲染层。但要注意，滥用
```
will-change
```
登录后复制
反而可能适得其反，因为它会消耗额外的内存和资源。只在你确定某个元素将要进行复杂动画时才使用它，并且在动画结束后移除它（如果可能的话）。
```
.animated-element {
  will-change: transform, opacity; /* 告知浏览器这两个属性会变化 */
  /* ... 其他动画属性 ... */
}
```
登录后复制
避免动画过多元素或复杂路径： 同时动画几十个、上百个元素，或者让元素沿着非常复杂的 SVG 路径运动，即使是 GPU 加速属性，也可能超出浏览器的处理能力。适度是关键。
减少动画的迭代次数和持续时间： 无限循环的动画如果过于复杂，长期运行也会消耗资源。如果不是必须，可以考虑有限次循环或较短的持续时间。

至于冲突，这通常发生在同一个元素上应用了多个动画，或者动画与

transition

登录后复制

属性同时存在时。CSS 动画的优先级规则通常是：

```
animation
```
登录后复制
属性会覆盖
```
transition
```
登录后复制
属性。
如果同一个元素应用了多个
```
animation
```
登录后复制
属性（通过逗号分隔），它们会同时运行。如果它们试图动画同一个属性，那么最后定义的动画规则会生效。例如
```
animation: animA 2s, animB 3s;
```
登录后复制
如果
```
animA
```
登录后复制
和
```
animB
```
登录后复制
都动画
```
opacity
```
登录后复制
，那么
```
animB
```
登录后复制
的
```
opacity
```
登录后复制
动画会覆盖
```
animA
```
登录后复制
的。我的经验是，最好将一个元素的动画逻辑集中在一个
```
@keyframes
```
登录后复制
规则中，这样更容易管理和调试，也能有效避免不必要的冲突。

除了@keyframes，还有哪些方法可以实现CSS多属性动画，它们的优劣是什么？

除了

@keyframes

登录后复制

，我们确实还有其他实现CSS动画的方式，它们各有侧重，适用于不同的场景。在我看来，选择哪种方式，更多是看你想要实现的效果和动画的复杂程度。

CSS
```
transition
```
登录后复制
属性：
- 实现方式：
```
transition
```
  登录后复制
  主要用于在元素状态改变时（例如
```
hover
```
  登录后复制
  ,
```
focus
```
  登录后复制
  ,
```
active
```
  登录后复制
  或者通过 JavaScript 添加/移除类）平滑地过渡一个或多个CSS属性。你可以在一个
```
transition
```
  登录后复制
  属性中指定多个属性进行过渡，用逗号分隔。
```
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease-in-out, background-color 0.5s ease-out;
}
.box:hover {
  width: 200px;
  background-color: red;
}
```
  登录后复制
- 优点： 语法简洁，非常适合简单的交互式动画，比如按钮的悬停效果、菜单展开/收起等。代码量少，易于理解和维护。
- 缺点： 只能定义两个状态（起始和结束），无法实现复杂的序列动画，也不能自动循环播放。动画的触发必须依赖于某个事件或状态变化。
- 适用场景： 页面元素的微交互，状态切换时的平滑过渡。
Web Animations API (WAAPI)：
- 实现方式： WAAPI 是一种 JavaScript API，它允许开发者通过 JavaScript 来创建和控制动画。它提供了比 CSS
```
animation
```
  登录后复制
  更强大的编程能力，你可以精确控制动画的播放、暂停、反向、速度等，并且可以动态地创建关键帧。
```
const box = document.querySelector('.box');
box.animate([
  { transform: 'translateX(0)', opacity: 1, backgroundColor: 'blue' },
  { transform: 'translateX(100px)', opacity: 0.5, backgroundColor: 'red' },
  { transform: 'translateX(200px)', opacity: 0, backgroundColor: 'green' }
], {
  duration: 2000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});
```
  登录后复制
- 优点： 极高的灵活性和控制力，可以实现非常复杂的动画逻辑，例如基于用户输入的实时动画、动画链、动画组等。性能通常也很好，因为它与浏览器底层的动画引擎紧密集成。
- 缺点： 需要 JavaScript 编程，对于纯 CSS 就能解决的问题，引入 JS 会增加复杂性。学习曲线相对陡峭一些。
- 适用场景： 动画逻辑复杂、需要与 JavaScript 深度交互、或者需要动态生成动画的场景。