CSS过渡动画闪烁主因是属性反复变化或transition绑定不稳定，应精准控制触发时机、使用transform等合成属性、合理设置duration/timing-function，并配合JS防抖与状态锁定。
CSS过渡动画重复闪烁，通常是因为触发了反复的属性变化，或者 transition 没有正确绑定到稳定的状态上，而不是单纯靠调大 duration 或换 timing function 就能解决。关键在于控制“何时开始、何时稳定、是否允许多次介入”。
确保 transition 绑定在非频繁变更的伪类或状态上
比如 hover 动画闪烁，常见原因是鼠标轻微抖动导致 :hover 反复进出。可改用 :focus-within、:active，或加一层容器包裹并扩大热区：
- 给父容器设置 padding 或 transparent border 扩大响应区域
- 用 transition-property 精确指定只过渡关心的属性（如 transform、opacity），避免 all 引发意外重绘
- 对图标+文字组合，不要给文字单独 hover 过渡，统一由父级控制
避免 layout 触发导致的强制重排重绘
闪烁常伴随布局抖动，根源是过渡了会触发重排的属性（如 width、height、top、left）。应优先使用合成层友好的属性：
- 用 transform: translateX(10px) 替代 left: 10px
- 用 transform: scale(1.1) 替代 width/height 变更
- 配合 will-change: transform（慎用，仅对高频动画元素）提示浏览器提前优化
合理设置 timing-function 和 duration 的组合
不是越慢越稳，也不是越快越流畅。duration 太短（300ms）又显得迟滞，增加重复触发窗口。推荐区间：
立即学习“前端免费学习笔记（深入）”；
- 微交互（按钮点击、开关切换）：60–120ms，timing-function 用 cubic-bezier(0.25, 0.46, 0.45, 0.94)（接近 ease-in-out，但起始更柔和）
- 模块展开/收起：200–250ms，用 ease-out 避免回弹感，结尾更干脆
- 禁止在过渡未完成时再次触发：加 JS 判断 getComputedStyle(el).transitionProperty 或用 class 锁定状态
用 JavaScript 辅助防抖和状态锁定
CSS 自身无法防抖，需 JS 配合：
- 添加过渡类前，先移除旧类并 offsetHeight 强制重排，确保样式重置
- 用 setTimeout 延迟添加动画类，避开连续事件流
- 过渡中添加 is-transitioning 类，CSS 中设 .el.is-transitioning { pointer-events: none; } 防止二次触发
