无限滚动照片横幅在悬停时使用HTML和CSS暂停动画

Question

按照本教程，我有这个无限的scorlling照片横幅疯狂的HTML和CSS -

http://designshack.net/articles/css/infinitephotobanner/

到目前为止它的确有效，但是当我将鼠标悬停在任何图像上时，我希望它暂停。

尝试将-webkit-animation-play-state:paused;置于图像的悬停状态，但它仅适用于第一张图像。

理想情况下，当我将鼠标悬停在任何照片上时，我会将这两行暂停。

这是我的代码 -

http://codepen.io/anon/pen/mPXgbW

任何帮助都将受到大力赞赏：）

Answer 1

将动画添加到包装div而不是第一张图像：

.photobanner {
  height: 233px;
  width: 3550px;
  animation-play-state: running;
  animation: bannermove 30s linear infinite;
}

当您将鼠标悬停在包装容器上时暂停动画：

.photobanner:hover {
  animation-play-state: paused;
}