使用 transition 可实现多个CSS属性同时过渡，通过逗号分隔为不同属性设置各自过渡效果，或用 all 统一设置；优先对 transform、opacity 等高性能属性做动画以提升性能。
在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：
立即学习“前端免费学习笔记（深入）”；
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 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实现多属性同时过渡的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1058576.html
微信扫一扫 
支付宝扫一扫 
