问题
动画并不总是页面加载的时候就开始。往往，我们都想通过用户的操作来触发动画，比如鼠标的悬浮( :hover )或者鼠标按下时( :active )。在这种情况之下，我们可能没办法控制动画播放的实妹次数，用户可能会迫使动画停止。例如，用户有通过悬浮( :hover )触发动画：鼠标移出元素之前动画结束。在这样的例子中会发生什么呢？
如果你的回答是“动画应该会呆其当前状态”或者“动画会顺利的过渡到前置状态”。默认情况下，动画就会停下来，突然跳到最初始状态。有时候可能会接受这种非常微妙的动画。但在大多数情况下它直接影响用户的体验。那么我们可以改变这种行为吗？
我决定拿一个 简单的页面 来说明这个问题（这个页面是我当作礼物送给我朋友Julian的）。注意右边圆形中的图片，当用户鼠标悬停在圆形上时，圆形中的图片慢慢开始向左滚动，显示被隐藏的那部分。默认情况，当用户鼠标移出圆形图片时，图片会立即回到原来的位置，这给人感觉体验不好。因为这是一个小网站，而这张图片又是该网站核心部分，我不能睁一眼闭一眼，必须得把这个问题给解决。
解决方案
假设我们一个很长的景观照片，如下图所示：
但我们要显示的空间只有 150px X 150px 的正方形。解决这个问题的一个方法就需要使用动画：默认显示图像的从图像的左边缘开始，当用户有交互行为时，图片慢慢向左滚动(例如，鼠标悬浮在图片上时)。我们使用单个元素，并且给他设置一个背景图片，通过动画修改 background-position 值来实现。
查看更多关于CSS秘密花园：动画状态_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114731