网页交互中控制多属性过渡动画需明确指定属性而非使用all，优先选用opacity和transform以保障性能，各属性可独立设置时长、缓动和延迟，transition应定义在常态而非伪类中，并可用transition-property:none临时禁用动画。
网页交互中控制多个属性的过渡动画，核心是让不同 CSS 属性按需、独立、协调地变化，而不是靠“all”一揽子处理。关键不在堆写法，而在明确意图和规避常见陷阱。
明确列出要动的属性，别依赖 all
transition: all 0.3s ease 看似省事，但会把 color、margin、font-size 等不可控或不该动的属性也纳入监听，既无效又可能引发意外跳变或性能损耗。更稳妥的做法是只写真正需要过渡的属性：
- opacity 和 transform 是首选——它们不触发重排（reflow），性能好，支持硬件加速
- 宽度、高度、背景色等可用，但 height: auto 无法过渡，必须设为具体数值（如 height: 0 → height: 200px）
- 避免对 display、visibility、position（值本身无连续性）等写 transition，它们不会产生动画
用逗号分隔，给每个属性配专属节奏
多个属性可以拥有各自的时间、缓动函数和延迟，语法上用逗号分隔即可：
transition: opacity 0.2s linear, transform 0.4s cubic-bezier(0.34, 0, 0.2, 1) 0.1s, background-color 0.3s ease-in;这段代码意味着：
- 透明度在 0.2 秒内匀速变化
- 变换（比如 scale 或 translate）0.1 秒后启动，耗时 0.4 秒，使用自定义贝塞尔曲线
- 背景色在 0.3 秒内慢入式过渡
注意：delay 只作用于它前面紧邻的那个属性，不是全局延时。
把 transition 写在初始状态，不是 hover 里
很多效果反向不流畅，是因为 transition 只写在 .btn:hover 中。正确做法是把它定义在常态规则里：
.btn { background-color: #007bff; transform: scale(1); transition: background-color 0.3s, transform 0.2s; }.btn:hover { background-color: #0056b3; transform: scale(1.05); }
这样鼠标移入和移出都会触发动画。如果只在 hover 里写 transition，移出时样式会立刻回退，失去“返回动画”。
用 transition-property: none 临时禁用动画
某些场景下需要“立刻生效”，比如用户点击按钮后执行 JS 操作，不希望再有过渡干扰。可以在对应 class 中设置：
.btn.active { transition-property: none; }这个声明优先级高于其他 transition 简写，能彻底关闭所有过渡——不是暂停，而是让后续样式变更瞬间完成。适合做开关式控制。
