Flexbox下transition失效或抖动源于flex布局约束与CSS动画属性的隐式冲突：width/height需配合min-width/min-height确保可插值；left/top应改用transform；transition须写在基础选择器而非:hover中；务必通过Computed面板验证实际生效值。
Flexbox下transition失效或抖动，根本不是transition写错了，而是浏览器在flex布局约束和CSS动画属性之间发生了隐式冲突——尤其当涉及width、height、left/top或不完整的transform时。
为什么width/height过渡在flex子项里“没动画”
flex item的width和height初始计算值通常是auto，哪怕你写了width: 100px，也可能被flex: 1或flex-grow覆盖。而auto → 200px无法插值，浏览器直接跳变。
- 打开DevTools → Computed面板，搜索
width，确认它显示的是auto而非像素值 - 必须同时设置
min-width: 100px和width: 100px（高度同理），min-width不参与flex拉伸，能提供稳定起始值 - 避免
min-width: 0，部分浏览器解析异常；改用min-width: 0.01px或1px - 更推荐方案：
transform: scaleX(1)→scaleX(1.5)，不触发重排，也不受flex尺寸逻辑干扰
left/top在flex子项中无效还抖动
flex item默认忽略left/top——除非你把它设为position: absolute。但强行加position: relative + left: 50%，会和justify-content冲突，导致首帧闪动或偏移。
- 改用
transform: translateX()替代left，它是视觉偏移，不影响flex布局流 - 关键帧中必须完整声明所有
transform子属性，例如transform: translateX(20px) scaleY(1)，不能只写translateX(20px)，否则浏览器可能回退到默认值引发重排 - 若父容器有
align-items: center，动画元素要加align-self: flex-start，防止交叉轴位置被动态重算 - 首帧错位？手动设置初始
transform，使其与flex当前渲染位置一致（可用getComputedStyle(el).transform反推）
transition只单向生效（hover有动画，移开无）
这是最常被忽略的配置错误：把transition写在:hover规则里，而不是基础选择器上。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.btn:hover { transform: scale(1.2); transition: transform 0.3s; } - 正确写法：
.btn { transform: scale(1); transition: transform 0.3s; } .btn:hover { transform: scale(1.2); } - 务必去Computed面板验证
transition-property和transition-duration是否都不是none或0s - 检查是否有全局样式如
* { transition: none !important; }覆盖了你的规则
真正难处理的不是语法，而是浏览器在 layout、paint、composite 三阶段之间的权衡——flex 布局本身是 layout 阶段的产物，而transform本该走 composite，一旦你混用width和transform，或者漏掉will-change提示，就容易卡在中间阶段。动手前先看Computed，别信Styles面板里写的那行代码。
