css - 変換に使用する遷移プロパティは何ですか？

Question

これが正しい方法かどうかは
わかりませんが、要素をスピンしたいので、機能することはわかっていtransform: rotate(90deg)ますが、変換transition-property:allを遷移させたくありません。何を使用すればよいですか。回転するアニメーションを作成するためのより良い方法はありますか？all
transition-property

Answer 1

をターゲットtransformにtransition-propertyするには、次を使用する必要があります。

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -ms-transform;
-o-transition-property: -o-transform;
transition-property: transform;

Answer 2

より良い方法ではないかもしれませんが、代わりにアニメーション キーフレームを使用することもできます (アニメーションを連続的に繰り返したい場合はこちらの方が適しています)。

@keyframes rotateDiv {
   from { transform: rotateZ(0deg); }
   to   { transform: rotateZ(360deg); }
}

div {
   animation-name: rotateDiv;
   animation-duration: 1s;
   animation-timing-function: linear; /* For a steady rate loop */
   animation-delay: 0s;            
   animation-iteration-count: infinite; /* Use actual numbers for limited repeat */
}