Page 248 - css揭秘

46 状态平滑的动画

背景知识
基本的 CSS 动画，animation-direction（在“闪烁效果”中曾简要
提及）

难题

不是所有动画都是在页面一加载好就立即播放的。更常见的情况是，
我们想通过动画来响应用户的动作，比如用户的鼠标悬停在某个元素上
（:hover），或者按住鼠标键（:active），等等。在这种场景下，我们将无
法控制动画实际的循环次数，因为用户的动作会随时中断动画，而此时动画
不可能刚好插放到我们事先指定的循环次数。举例来说，用户的鼠标可能会
触发一个华丽的 :hover 动画，而在动画还没有播完的时候，鼠标就从元素
上移走了。在这种情况下，你觉得动画会如何收场呢？

如果觉得“动画应该停留在当前状态”或者“动画应该平滑地过渡回
开始状态”，那你就要大跌眼镜了。在默认情况下，动画只会立即停止播放，
1①
并生硬地跳回开始状态 。对于某些非常细微的动画来说，这种行为还算可
以接受。但在绝大多数时候，这只会产生非常生硬的用户体验。我们有可能
改变这种行为吗？

① 这是我们尽可能采用过渡的另一个原因。此时动画会生硬地跳回开始状态，但过渡的行为则
完全不同，过渡会反向播放，从而平滑地过渡回原始状态。

46 状态平滑的动画 217

඀ࠡ JOEC