如图 实现一个赞助商横向滚动列表墙，
上下两排向右滚动，中间向左滚动，鼠标移入暂停当前行。

实现：

// 使用animation.moving {animation: move 20s linear infinite;
}@keyframes move {0% {}100% {transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);
}}.moving2 {animation: move2 20s linear infinite;-webkit-animation: move2 20s linear infinite;
}@keyframes move2 {0% {
}100% {transform: translateX(50%);-webkit-transform: translateX(50%);-moz-transform: translateX(50%);-ms-transform: translateX(50%);-o-transform: translateX(50%);
}}

原来想的是 使用addClass 和removeClass进行moving属性添加移除，从而达到鼠标移入暂停的效果，但是实现的时候发现每次鼠标移入，列表图片都会向左右抖动一下，并不美观。

.moving: hover {animation: paused; // 同样存在这个问题，但是没之前那么明显了
}

最终解决：

.moving:hover {animation-play-state:paused;
}
// 特别流畅，不会出现抖动，效果实现

总结：
css animation-play-state 属性

暂停动画：animation-play-state:paused;
-webkit-animation-play-state:paused; /* Safari 和 Chrome */// paused	指定暂停动画	 
// running	指定正在运行的动画// Internet Explorer 9 以及更早的版本不支持 animation-play-state 属性。