2

これは、を使用して解決できる問題ではありませんease-in。

CSS3 で一定時間回転させたい要素があるが、開始が遅く終了が遅い場合、どうすればよいですか?

CSS

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

div{
  background-image:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(51,51,51,1) 20%,rgba(0,0,0,1) 20%,rgba(51,51,51,1) 40%,rgba(0,0,0,1) 40%,rgba(51,51,51,1) 60%,rgba(0,0,0,1) 60%,rgba(51,51,51,1) 80%,rgba(0,0,0,1) 80%,rgba(51,51,51,1) 100%);
  width: 200px;
  height: 200px;
  -webkit-animation-name: spin; 
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 60.5;
  -webkit-animation-timing-function: ease-in;
}

HTML

<div></div>

これを行う方法がわかりません。1 回のスピンが完了するのに 2 秒かかるため、私のアニメーションは合計 121 秒間実行されます。つまり、60.5 回のスピンには合計 121 秒かかります (計算が間違っている場合は教えてください)。これは正常に動作しますが、div がゆっくりと回転を開始し、59 回すべての回転を完了してから、最後の 1 回でゆっくりと終了することを除いては。

可能であれば、純粋な CSS を使用したいと思います。

4

2 に答える 2

2

JSFiddle を持っていないことを残念に思います...

編集:私は実験で相対的な解決策を使用しました: CSS3 Clock、それは半分のフィドルと見なすことができますか? :D

編集＃2：@Charlieが提供するJSFiddle：http://jsfiddle.net/7DPnc

本当に純粋な CSS でなければならない場合は、3 つdivの s をまとめてラップし、別々にスピンすることをお勧めします。

CSS

div.first_round
{
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1;
}
div.last_round
{
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:1.5;
-webkit-animation-delay:100s; /* you'll have to do the math */
}
div.main_round
{
-webkit-animation-duration:2s;
-webkit-animation-delay:3s;
-webkit-animation-iteration-count:59;
-webkit-animation-timing-function:linear;
}

HTML

<div class="first_round">
<div class="last_round">
<div class="main_round">
</div>
</div>
</div>

または、少しJSを使用しても構わない場合は、animationendイベントをリッスンします...

于 2012-08-15T04:12:50.567 に答える