【状态平滑的动画】鼠标移出动画暂停

假设我们有一张非常长宽幅的照片，但只提供一个150 x 150的区域利用动画来展示它。

<div class="one">
</div>

我们给它加上动画属性，并且改变它的background- position属性，当它的值从原来的 0 0一直变化到100% 0时，鼠标悬停在图片上我们就会看到这张图片从左滚动到右的完整过程。

@keyframes one{
  to { background-position: 100% 0;}
}
.one {
  width:150px;
  height:150px;
  background: url("xxx.jpg" );
  background-size: auto 100%;   /*此处把图片的高度设置为可视区域的高度*/
}
.one:hover, .one:focus {
    animation:one 10s linear infinite alternate;
}

不过，当我们把鼠标从图片上移出时，它就会生硬的跳回最左侧，最初的样子。
而我们所期待的是当鼠标移出时，图片就暂停在当下，当鼠标又放上去时，动画继续的效果。此时就会用到 animation-play-state。
因此我们需要把动画加在.one这条样式中，让它一开始就处于暂停状态，直到 :hover 时再启动动画。这再也不是添加和取消动画的问题了，而是 暂停和继续一个一直存在的动画。

@keyframes one{
  to { background-position: 100% 0;}
}
.one {
  width:150px;
  height:150px;
  background: url("http://seopic.699pic.com/photo/00000/9982.jpg_wh1200.jpg" );
  background-size: auto 100%;
  animation:one 10s linear infinite alternate;
  animation-play-state: paused;   /*动画处于暂停状态*/
}
.one:hover, .one:focus {
  animation-play-state: running;   /*鼠标悬停时动画便运行*/
}

这时，便能得到我们想要的效果了。

<u>查看demo</u>

---

参考书籍：Lea Verou《CSS揭秘》