暂停css动画

【问题标题】：Pause css animation暂停css动画
【发布时间】：2015-03-17 06:17:13
【问题描述】：

我用 html 和 css 制作了幻灯片，我想在鼠标移到幻灯片上时暂停幻灯片。我尝试使用-webkit-animation-play-state: paused; 来执行此操作，但这只会暂停 1 张图像，因此会弄乱幻灯片。有没有办法在悬停时暂停所有图像？

【问题讨论】：

【解决方案1】：

http://jsfiddle.net/m3q8pe56/1/

#slideshow:hover .photo {
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
}

当您悬停#slideshow 时，您将暂停#slideshow 内的所有.photo

【讨论】：

请添加一些解释:)
谢谢兄弟！这是否意味着：当鼠标经过 div 幻灯片时，暂停 .photo 的每个实例？
@AlexChar 我认为这是不言自明的，但我有点同意你的看法。这只是将当前在您的元素上运行的动画的状态设置为暂停。选择器#slideshow:hover .photo 也是您所需要的：如果您将鼠标悬停在#slideshow 元素上，它会选择.photo 元素，从而暂停动画。