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

Question

按照本教程，我用 HTML 和 CSS 疯狂地制作了这个无限的 scorlling 照片横幅 -

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;
}