Question

我有以下代码：

        .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？我知道我犯了一个简单的错误。

Answer 1

看起来你在说任何带有.picTransition＆amp;类的元素。 .paused应该暂停动画，但是没有JavaScript会一直都是因为你默认设置了这个类，或者从来没有因为它没有那个类。

如果您希望暂停某个活动，请使用JavaScript添加/删除该类，或者如果这是一个简单的悬停事件，请将.picTransition.paused更改为.picTransition:hover。

如果.paused是.picTransition的子元素，请确保选择器中两者之间有空格。

如果没有一个是正确的，你可以创建一个jsFiddle供我们查看吗？

暂停CSS幻灯片-webkit-animation-play-state：暂停;不工作

1 个答案: