通过转换更改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

不，这是不可能的。 动画持续时间不可动画。

source on MDN

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