使用转换更改CSS3动画持续时间

我试图像这样缩短动画的持续时间

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

#platines .disc {
  background: url(../img/disc.png) no-repeat;
  height: 86px;
  width: 86px;
  margin-top: 1px;
  position: absolute;
  z-index: 1;
  -webkit-animation-name:             rotate; 
  -webkit-animation-duration:         0.9s; 
  -webkit-animation-iteration-count:  infinite;
  -webkit-animation-timing-function:  linear;
}

#platines .disc.paused {
  -webkit-transition: -webkit-animation-duration 2s;
  -webkit-animation-duration:  60s; 
  -webkit-animation-iteration-count:  4;
}

不幸的是，这不起作用。你已经找到解决这个问题的办法了吗？

不，不可能。 动画持续时间不可设置动画

---

如果在动画运行时更改此值，它将重新启动动画而不进行过渡。

到底是什么问题？它在Chrome上对我很有用：（我加速了动画，这样就可以看了！）。它在Firefox中不起作用，因为您使用了-

webkit-

前缀…最初，

.disc

的旋转速度比

快。添加暂停的
可以通过一个过渡来降低动画的速度（
-webkit transition:-webkit animation duration 2s；
）。这不起作用。如您所见：。当背景色变为黄色时，旋转应减速并停止。这至少是我想做的。对我来说是有效的，你只需要等待一段时间，4个旋转就会发生。