transition 不会继承，但子元素未显式声明时会使用父级提供的初始值；是否触发过渡取决于子元素自身属性是否变化及是否有生效的 transition 声明。
transition 会继承吗？子元素为什么跟着动了
不会主动继承，但子元素的 transition 属性如果没显式设置，会从父元素“拿到”初始值（比如 all 0.3s ease），然后在自身状态变化时触发——看起来像被父元素带跑了。
常见错误现象：div.parent { transition: all 0.3s; } div.child { opacity: 0.5; }，结果鼠标 hover 父元素时，子元素透明度也渐变了，其实只是子元素自己的 opacity 被重设（比如父级 hover 改了子元素 class），而它恰好有继承来的 transition。
- 子元素是否动画，只取决于它自己属性是否变化 + 是否有生效的
transition声明 - 父元素的
transition对子元素无直接作用，但可能间接触发子元素样式重算（例如父级 transform 变化导致子元素重绘） - 用
getComputedStyle(el).transition在控制台查，能确认子元素实际生效的过渡值是不是来自继承
如何阻止子元素响应父级的过渡效果
关键不是“禁用继承”，而是切断子元素对相关属性的过渡响应。最可靠的方式是显式覆盖：
- 给子元素加
transition: none—— 简单粗暴，但会关掉它所有过渡 - 只禁用特定属性：比如父级动
transform，子元素又不需要过渡，就写transition-property: opacity, color（漏掉transform） - 用
transition: unset或transition: initial，但注意兼容性：IE 不支持unset，initial在部分老浏览器里对 transition 表现不一致
示例：
.parent { transition: transform 0.2s; }
.child { transition: opacity 0.15s; } /* 不写 transform，它就不会因父级缩放/位移而过渡 */
transform 动画下子元素“抖动”或“错位”的真实原因
这不是继承问题，而是层叠上下文和渲染管线的副作用。当父元素应用 transform（尤其是非 none 值），浏览器通常会为它创建独立的合成层（compositing layer），子元素若未强制提升（如加 will-change: transform 或 transform: translateZ(0)），可能被降级到软件渲染，导致边缘模糊、位置偏移或帧率下降。
立即学习“前端免费学习笔记（深入）”；
- 检查是否意外触发了 subpixel rendering：父级
transform: translateX(10.5px)会让子元素像素对齐失效 - 避免在父级
transform动画中频繁修改子元素的top/left或margin，它们和 transform 不同源，容易打架 - 用 Chrome DevTools 的 “Layers” 面板看子元素是否被正确分层，而不是靠猜
transition 和 will-change 的配合陷阱
will-change 是提示浏览器“这个元素即将变化”，但它本身不触发动画，也不继承。问题常出在：父元素设了 will-change: transform，子元素没设，结果父级动画一开，子元素渲染突然变卡或闪烁。
-
will-change不会继承，但它的层提升效果会影响子树——子元素可能被“捎带”进同一个合成层，也可能被挤到另一个层，取决于布局和硬件加速策略 - 不要全局写
* { will-change: transform }，这会让浏览器过度分配资源，反而拖慢动画 - 真正需要的是精准标记：只对将要动画的元素（且确定会变）设
will-change，动画结束立刻用 JS 清掉，比如el.style.willChange = 'auto'
复杂点在于：过渡行为是否发生，最终取决于属性是否可动画、是否被重绘/重排、是否进入合成层——继承只是表象，底层是渲染引擎的调度逻辑。别只盯着 CSS 规则，多看 Layers 面板和 Rendering FPS 面板。
