使用过渡更改CSS3动画持续时间

Question

我尝试像这样减少动画持续时间。

@-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;
}

很遗憾，这并不起作用。你已经找到了解决这个问题的方法吗？

- beeksi

---

问题到底是什么？在Chrome中它对我有效：http://jsfiddle.net/cchana/ZScuH/（我加快了动画速度，以便更容易观看！）。由于您使用了-`webkit-`前缀，因此它在Firefox中无法正常工作... - cchana

最初，.disc 旋转得更快，然后添加了 .paused 来通过过渡 (-webkit-transition: -webkit-animation-duration 2s;) 减慢动画速度。但这并没有起作用。 - beeksi

正如您所见：http://jsfiddle.net/c9Vyw/。当背景颜色变为黄色时，旋转应该减缓并停止。这至少是我尝试做的。 - beeksi

对我可行，你只需等待四个轮换一段时间即可。 - cchana

Answer 1

不，这是不可能的。

animation-duration属性不可动画化。

MDN上的来源

如果在动画运行时更改此值，则会重新启动动画，但没有过渡效果。

- Julian