transition必须写在需过渡的元素本身上，如.text{transition:color 0.3s}配合.box:hover .text{color:red}；用all易致性能问题；js动态修改需requestanimationframe分步触发；timing-function依交互意图选择。
transition属性写在哪个元素上才生效
必须写在「需要产生过渡效果的元素本身」上，而不是它的父元素或触发元素。比如鼠标悬停时改变子元素颜色，transition 要加在子元素的 CSS 规则里，而不是 :hover 所在的选择器上。
- 错误写法：
.box:hover .text { color: red; }，但没给.text设置transition - 正确写法：
.text { transition: color 0.3s ease; }，再配合.box:hover .text { color: red; } - 如果过渡依赖伪类（如
:focus），transition仍要写在基础状态（非伪类）的规则中，否则首次进入时无动画
transition-property设为all会带来什么问题
transition-property: all 看似省事，但容易引发意外过渡和性能问题。
- 任何可动画的 CSS 属性变更都会触发过渡，包括你没意识到的（比如
box-shadow、transform被 JS 框架悄悄修改） - 浏览器需对所有属性做过渡计算，可能触发不必要的重排（reflow）或重绘（repaint），尤其在移动端卡顿明显
- 推荐明确列出需要过渡的属性：
transition-property: background-color, opacity, transform; - 简写时可用
transition: background-color 0.2s, opacity 0.2s, transform 0.3s;实现不同属性不同持续时间
为什么transition有时不触发，尤其是JS动态修改样式时
常见原因是浏览器跳过了「样式变更前后的中间状态」，导致过渡链断裂。
