可打断：半路改主意也顺滑
transition 最被低估的招牌特性：它天生可打断且可逆。过渡进行到一半，触发条件反转（鼠标移出、状态翻回）时，它从当前值平滑反向，而不是跳变或硬重启。这正是按钮 hover 反复进出却始终丝滑的原因。@keyframes animation
则按固定时间线推进，半路把它撤掉，元素会突兀地跳回。
##「戳一下又收回」：触发后 300ms 撤销，对比两者回退表现
点按钮：两个方块同时出发去右边（各需 0.9s），但 300ms 后就撤销触发（还没走到头）。transition 从当前位置平滑往回走；animation 因为 @keyframes 被移除，直接跳回起点。
为什么 transition 天生可逆：它在任意时刻都只关心「目标值」与「当前计算值」，触发反转时就以当前值为新起点重新补间——位置连续、速度虽会突变但视觉顺滑。@keyframes 绑定的是一条固定时间线，移除它只能让元素回落到基样式，于是跳变。所以交互反馈（hover / focus /
展开收起）优先用 transition；要带速度接管地平滑反向（而非位置连续即可），则需要引擎层的弹簧 velocity handoff。这一条也是 好动画七准则里「可打断」的来源。