如何用css transition实现多属性同时过渡-css教程-PHP中文网

如何用css transition实现多属性同时过渡

P粉602998670

发布： 2025-09-23 13:20:01

原创

499人浏览过

使用 transition 可实现多个CSS属性同时过渡，通过逗号分隔为不同属性设置各自过渡效果，或用 all 统一设置；优先对 transform、opacity 等高性能属性做动画以提升性能。

如何用css transition实现多属性同时过渡

在CSS中，使用 transition 实现多个属性同时过渡非常简单，只需要将多个属性的过渡规则写在一起即可。浏览器会自动处理这些属性的并行动画过程。

1. 使用简写属性 transition 同时控制多个CSS属性

你可以通过逗号分隔的方式，为不同的属性设置各自的过渡效果：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease, height 0.5s ease, background-color 0.5s linear;
}

div:hover {
  width: 200px;
  height: 200px;
  background-color: red;
}

当鼠标悬停时，width、height 和 background-color 会同时开始过渡，各自按设定的时间和缓动函数变化。

2. 使用 all 简化所有属性的过渡

如果你希望元素的所有可动画属性都拥有统一的过渡效果，可以直接使用 all：

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

ViiTor实时翻译

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

116

查看详情

div {
  width: 100px;
  height: 100px;
  opacity: 0.8;
  transition: all 0.4s ease;
}

div:hover {
  width: 150px;
  height: 150px;
  opacity: 1;
}

这样所有发生变化的属性都会以相同的过渡时间和平滑方式执行动画。

3. 注意性能与可动画属性

不是所有CSS属性都支持过渡。建议优先对以下高性能属性做动画：

transform（如 scale、rotate、translate）
opacity
filter（部分浏览器支持）

例如，用 transform 替代 width/height 更高效：

div {
  transform: scale(1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

div:hover {
  transform: scale(1.2);
  opacity: 0.9;
} 基本上就这些。多属性过渡的关键是把它们列在 transition 属性里，用逗号分开，每个可以有不同的时间或曲线，浏览器会自动同步播放。

以上就是如何用css transition实现多属性同时过渡的详细内容，更多请关注php中文网其它相关文章！