答案是transition必须写在默认状态而非:hover中，否则移出时因起始态无过渡声明而瞬间跳变；需显式声明transform: scale(1)和transition-property匹配实际变化属性。
transition 必须写在常态选择器里，不能只放 :hover 中
鼠标移出时“啪”一下跳回原样，根本原因就是 transition 只写了 .box:hover 里。浏览器在移出时找不到起始过渡状态，只能硬切——它不是没动，是压根没触发过渡逻辑。
正确写法是把 transition 放在基础选择器中，:hover 里只改属性值：
.card {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover {
transform: scale(1.08);
}
-
transform: scale(1)必须显式写出，不能省略；否则首次 hover 可能从none跳变，触发重排 - 缓动函数建议用
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认ease更轻快 - 别用
transition: all 0.25s—— 它会让border-color、box-shadow等隐式继承值也参与过渡，拖慢响应
transition-property 不匹配会导致“单向失效”
移入有动画、移出却跳变，也可能是你改的属性根本不在 transition-property 列表里。比如常态写了 transition: background-color 0.3s，但 :hover 里改的是 color 或 opacity，那移入也不会动。
- 检查实际变化的属性是否被明确列出：
transform、opacity、background-color是安全可过渡的；display、position、height（无固定值时）不可插值 - 多个属性需过渡时，用逗号分隔：
transition: opacity 0.15s, transform 0.25s - 避免在
:hover中修改不可过渡属性（如display: none），否则整个过渡会被浏览器放弃
display / visibility 切换会彻底绕过 transition
如果你用 display: none/block 或 visibility: hidden/visible 控制显隐，无论怎么写 transition 都不会生效——display 是离散值，没有中间态；visibility 虽然可设 transition，但只有两态，视觉上仍是开关式切换。
- 正确做法：用
opacity: 0+pointer-events: none模拟隐藏，并确保初始和终态都定义了可过渡属性 - 若需缩放隐藏，优先用
transform: scale(0)，而非height: 0 - 图片父容器记得加
overflow: hidden，防止scale()后溢出边界
transition-delay 在移出时不翻转，容易误判为“卡住”
transition-delay 是单向的：它只控制“状态变更后、过渡开始前”的等待时间。写在常态里，进和出都等这个延迟；写在 :hover 里，只影响移入。很多人以为移出也该等，结果发现移出立刻动了，误以为动画坏了。
- 想让移入延迟、移出立刻响应？不行——CSS
transition天生对称，进和出共用同一套参数 - 真要非对称行为（比如移出立刻停），得靠 JS 干预：在
mouseleave时先移除transition，再同步设目标样式 - 移动端要注意：父级若有
transform或opacity，iOS Safari 可能静默禁用子元素的background-color过渡
transition 是个守门人，它只认常态下的声明；一旦被覆盖、被省略、或作用到不可插值的属性上，平滑就立刻崩掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
