Html 使用-webkit动画播放状态暂停CSS幻灯片：暂停；不起作用

我有以下代码：

        .picTransition .item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: picTransition 56s linear infinite;
  -moz-animation: picTransition 56s linear infinite;
  -ms-animation: picTransition 56s linear infinite;
  animation: picTransition 56s linear infinite;
}

.picTransition.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

.picTransition .item:nth-child(2) {
  -webkit-animation-delay: 14s;
  -moz-animation-delay: 14s;
  -ms-animation-delay: 14s;
  animation-delay: 14s;
}
.picTransition .item:nth-child(3) {
  -webkit-animation-delay: 28s;
  -moz-animation-delay: 28s;
  -ms-animation-delay: 28s;
  animation-delay: 28s;
}
.picTransition .item:nth-child(4) {
  -webkit-animation-delay: 42s;
  -moz-animation-delay: 42s;
  -ms-animation-delay: 42s;
  animation-delay: 42s;
}

---

我在如何暂停幻灯片上犯了一个错误。我使用了动画播放状态：暂停，但它不工作。我可以使用jquery函数，但我真的想尝试让它只在css中工作。我是不是把亲子关系搞砸了？或者这个计时序列不受支持，或者会干扰暂停问题？也许我需要做一个悬停类型的暂停，并为此构建一个新的div？我知道我犯了一个简单的错误。

看起来你说的是带有类的任何元素。PictTransition&

。暂停的

应该暂停动画，但如果没有JavaScript，它将一直是默认设置的类，或者永远不会，因为它没有该类

如果希望在事件上暂停，请使用JavaScript添加/删除该类，或者如果它是一个简单的悬停事件，请将

.picTransition.paused

更改为

。picTransition:hover

如果

.paused

是

.picTransition

的子元素，请确保选择器中这两个元素之间有空格

如果这些都不对，您是否可以创建一个JSFIDLE供我们查看