css - 回転変換のみを遷移するには?

Question

背景画像を構成するためにたくさんの要素を使用していますが、それらはすべて絶対に配置され、自由に回転します。

問題は、上または左のプロパティではなく、これらのオブジェクトの回転のみを移行したいということです。で、transition: transform 30s;許可されていないようです。私はするという素晴らしいアイデアを持っていました

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

しかし、それもうまくいきません。どうすればこれを解決できますか?

Answer 1

Transform はベンダー プレフィックスです

それ以外の

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

行う

-webkit-transition: -webkit-transform $amount-of-time ease-out;
-moz-transition:    -moz-transform $amount-of-time ease-out;
-o-transition:      -o-transform $amount-of-time ease-out;
-ms-transition:     -ms-transform $amount-of-time ease-out;
transition:         transform $amount-of-time ease-out;

Answer 2

回転プロパティのみをアニメーション化するには、これが少なくとも Chrome で機能することがわかりました。

transition: transform 2.0s;

1 つの遷移プロパティ内のさまざまなプロパティにさまざまなアニメーション時間を設定できます。

transition: transform 2.0s, color 5.0s, font-size 1.0s;

特にプロパティの秘訣は、代わりにプロパティrotateを使用することです。transform直感的に、これは機能するはずですが、機能しません:

transition: rotate 2.0s; /* DOES NOT WORK */

代わりに、次の代わりに使用する必要がありtransformますrotate。

transition: transform 2.0s;

これはrotate: 90degおそらくtransform: rotate(90deg)

ノート

transitionすべての主要なブラウザーの最新バージョンでサポートされるようになりました。古いブラウザとの互換性をさらに高めたい場合は、次のようにすることをお勧めします。

-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s;
-moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s;
-ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s;
-o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s;
transition: transform 2.0s, color 5.0s, font-size 1.0s;