使用 transition 可同时控制多个属性过渡，通过逗号分隔为各属性设置不同效果，或用 all 实现统一过渡，还可单独设定每个属性的持续时间与缓动函数，确保初始与目标状态明确即可触发动画。
在CSS中，使用 transition 控制多个属性同时过渡非常简单，只需要在样式规则中为 transition 属性指定多个过渡效果，或直接使用简写方式让所有可动画的属性一起过渡。
你可以通过逗号分隔的方式，为不同的CSS属性分别设置过渡效果：
div {
width: 100px;
立即学习“前端免费学习笔记（深入）”；
height: 100px;
background-color: blue;
margin-left: 0;
transition: width 0.5s ease, height 0.5s ease, background-color 0.5s linear, margin-left 0.8s;
}
div:hover {
width: 200px;
height: 200px;
background-color: red;
margin-left: 50px;
}
上面的例子中，宽度、高度、背景色和外边距在鼠标悬停时会同时开始过渡，各自按设定的时间和缓动函数变化。
如果你希望元素的所有可动画属性都以相同方式过渡，可以直接使用 all 关键字：
div {
width: 100px;
立即学习“前端免费学习笔记（深入）”；
height: 100px;
background-color: blue;
transition: all 0.5s ease;
}
div:hover {
width: 200px;
height: 200px;
background-color: green;
}
这样，所有发生变化的属性都会以 0.5 秒的缓动动画进行过渡。
有时你可能希望某些属性过渡得快一些，另一些慢一些。可以单独定义：
transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
例如透明度变化较快，而位移或缩放使用更复杂的缓动曲线，视觉效果更自然。
基本上就这些。只要把需要过渡的属性用逗号分开写进 transition，它们就能在状态变化时同时启动动画。关键是确保初始状态和目标状态都有明确的值，浏览器才能计算中间帧。不复杂但容易忽略细节。
以上就是在css中如何用transition控制多属性同时过渡的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
927
收藏
