无限滚动图片横幅与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;
}