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动态修改样式时
常见原因是浏览器跳过了「样式变更前后的中间状态」，导致过渡链断裂。
- 直接连续设置两个样式（如先改
opacity，再改transform），浏览器可能合并渲染，只看到最终态 - 解决方法：用
setTimeout或requestAnimationFrame分开两步，强制触发重排：element.style.opacity = '0';
requestAnimationFrame(() => {
element.style.transform = 'translateX(100px)';
}); - 确保元素初始状态已声明可过渡属性（例如
opacity: 1必须在 CSS 中写明，不能靠浏览器默认值） - 注意 display 切换（
display: none ↔ block）完全绕过 transition，应改用visibility+opacity配合
transition-timing-function常用的值怎么选
transition-timing-function 控制过渡的速度曲线，不是越花哨越好，关键看交互意图。
立即学习“前端免费学习笔记（深入）”；
-
ease（默认）：缓入缓出，适合大多数 ui 变化，如按钮悬停、菜单展开 -
ease-in-out：比ease更平滑，起止更柔和；ease-in和ease-out分别强调进入或退出感，慎用——容易显得生硬 -
linear：匀速，适合进度条、仪表盘等需要精确节奏的场景 - 自定义贝塞尔曲线：
cubic-bezier(0.22, 0.61, 0.36, 1)可模拟物理惯性，但调试成本高；推荐用 cubic-bezier.com 可视化调节
过渡真正难的不是写法，而是判断哪些变化该有动画、哪些该立刻响应。比如表单校验提示出现，延迟 0.1s 比 0.3s 更符合用户预期；而模态框关闭，用 ease-out 比 ease 更能强化“收走”的感知。这些细节不在语法里，而在交互节奏中。