html - 带有 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;
}