interruptible · 平滑反向 · vs @keyframes

可打断：半路改主意也顺滑

transition 最被低估的招牌特性是天生可打断且可逆。过渡进行到一半，触发条件反转（鼠标移出、状态翻回）时，它从当前值平滑反向，而不是跳变或硬重启。这正是按钮 hover 反复进出却始终丝滑的原因。@keyframes animation 则按固定时间线推进，半路把它撤掉，元素会突兀地跳回。

1 · 触发后 300ms 撤销的对照

图 1-1 · 点按钮后两个方块同时出发去右边（各需 0.9s），但 300ms 后就撤销触发，此时都还没走到头。transition 版从当前位置平滑往回走；animation 版因为 @keyframes 被移除，直接跳回起点。

建议 · 可逆的来由值得单独理清：transition 在任意时刻都只关心「目标值」与「当前计算值」，触发反转时就以当前值为新起点重新补间，位置连续、速度虽会突变但视觉顺滑。@keyframes 绑定的是一条固定时间线，移除它只能让元素回落到基样式，于是跳变。所以交互反馈（hover、focus、展开收起）优先用 transition；要带速度接管地平滑反向、而不只是位置连续，则需要引擎层的弹簧 velocity handoff。这一条也是好动画七准则里「可打断」的来源。

图 1-2 · 两种写法的代码对照，可切换看差异。