css - 使用过渡更改 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;
}

不幸的是，这不起作用。您是否已经找到解决此问题的方法？

Answer 1

不，这是不可能的。Animation-duration 是不可动画的。

来源 MDN

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