0

我有以下代码：

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

4

1 回答 1

0

看起来您是在说任何带有类的元素.picTransition&.paused应该暂停动画，但是如果没有 JavaScript，那么这将始终是您默认设置的类，或者永远不会因为它没有该类。

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

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

如果这些都不对，您能否创建一个 jsFiddle 供我们查看？

于 2013-06-05T07:44:49.000 回答