3

このようにアニメーションの長さを短くしようとします。

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

残念ながら、これは機能しません。この問題の解決策は既に見つかりましたか?

4

1 に答える 1

2

いいえ、それは不可能です。アニメーション期間はアニメーション化できません。

MDN のソース

アニメーションの実行中にこの値を変更すると、遷移なしでアニメーションが再開されます。

于 2012-08-20T23:47:42.283 に答える