CSSで無限に回転する方法

1. transformプロパティを使用する方法:

   @keyframes rotate {
   from {
   transform: rotate(0deg);
   }
   to {
   transform: rotate(360deg);
   }
   }
   .element {
   animation: rotate 2s linear infinite;
   }

   この方法では、@keyframesルールを使用して回転アニメーションを定義し、transformプロパティを使用して要素を回転させます。animationプロパティを使用してアニメーションを適用し、infiniteキーワードを指定して無限に繰り返すようにします。

2. transitionプロパティを使用する方法:

   .element {
   transform: rotate(0deg);
   transition: transform 2s linear;
   }
   .element:hover {
   transform: rotate(360deg);
   }

   この方法では、transitionプロパティを使用して要素の回転をトランジションさせます。要素の初期状態とホバー時の状態を指定し、transformプロパティを使用して回転の角度を設定します。

3. animationプロパティとsteps()関数を使用する方法:

   @keyframes rotate-steps {
   0% {
   transform: rotate(0deg);
   }
   100% {
   transform: rotate(360deg);
   }
   }
   .element {
   animation: rotate-steps 2s steps(8) infinite;
   }

   この方法では、steps()関数を使用して回転をステップごとにアニメーション化します。@keyframesルールで回転アニメーションを定義し、animationプロパティを使用してアニメーションを適用します。

これらはいくつかの一般的な方法ですが、CSSを使用して要素を無限に回転させる方法は他にもあります。適切な方法を選択し、必要に応じてカスタマイズしてください。