假设我们有一张非常长宽幅的照片，但只提供一个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揭秘》
