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

Question

按照本教程，我对 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;
}