根本原因不是动画“失效”，而是浏览器未收到“停在这里”的指令；transition只负责变化过程，不固化终态，若基础选择器未声明transform等属性的默认值，动画结束即回弹到unset或初始值。
根本原因不是动画“失效”，而是浏览器压根没收到“停在这里”的指令——transition只管怎么变，不管变完后站哪儿。
transition结束后回弹，是因为终态样式没被真正声明
常见错误是只在:hover或临时class里写transform: scale(1.2)，却没在基础选择器中声明transform: scale(1)。浏览器发现常态下该属性值是none（未声明），动画一结束就立刻退回到这个“空值”。
- 检查开发者工具「Computed」面板，确认目标属性（如
transform、opacity）在常态下有明确值，而不是unset或空白 -
transition必须写在基础选择器中，不能只塞进:hover或.active里——否则移出时过渡上下文直接清空 - 用
transform: translateX(0)代替left: 0做位移，前者可插值，后者从auto开始会跳变
animation-fill-mode: forwards为什么加了也没用
animation-fill-mode: forwards确实能锁住终态，但它的生效前提是关键帧必须完整定义100%（或to）的所有目标属性值。
- @keyframes里漏了
100%块？浏览器会用初始值补全，forwards锁住的其实是空壳 - 元素有内联样式（如
style="opacity: 0"）或高优先级类（如.disabled { opacity: 0; }），会直接覆盖forwards保持的值 - 动画被
animation-play-state: paused或animation-iteration-count: infinite拦住，根本没“结束”，forwards不触发 - 如果原始元素已有
transform: scale(0.9) rotate(2deg)，而动画to只写了translateX(100px)，那结束时scale和rotate会归none
哪些属性根本没法过渡，一动就回弹
不是所有CSS属性都支持平滑插值。一旦用了这些“硬开关”型属性，浏览器连过渡机会都不给，直接突变。
-
display: none：元素立刻从渲染树移除，transition完全不启动 -
height: auto：没有确定数值，浏览器算不出中间帧，只能跳变 -
background简写：可能隐含不可插值值（如background: url() center / cover），拆成background-color和background-image分别处理 -
transition-property: all看似省事，实则危险——它只对可插值属性起效，且依赖前后值是否可计算中间态
最容易被忽略的是：回弹从来不是孤立问题，它总是暴露了样式声明的断层——要么起始值没写，要么终态没固化，要么用了不该动的属性。盯住「Computed」面板里的实际值，比反复调timing-function更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
