無限の CSS 回転アニメーションを作成するには?

無限 CSS 回転アニメーションを実装する

問題:

CSS を使用して読み込み中のアイコンを連続的に回転させたい、提供されたコード目的のアニメーションを生成できません。 CSS を使用してこの回転を効果的に実行するにはどうすればよいですか?

解決策:

CSS を使用して無限の回転を実現するには、次の手順を実行します:

1. CSS アニメーション キーフレームを追加:

   • @keyframes 表記で回転キーフレームを定義します。
   • 回転変換の from 状態と to 状態を設定します。

2. ターゲット要素にアニメーションを適用します:

   • CSS で回転クラスを作成します。
   • アニメーションを適用しますanime-name、animation-duration、animation-iteration-count を使用して目的の要素に追加します。

3. ベンダー プレフィックスを含める:

   • ブラウザ間の互換性を確保するために、-webkit-、-moz- などの接頭辞を追加します。

コード例:

<code class="css">@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>

Html:

<code class="html"><div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div></code>

この改訂されたコードにより、無限の反復による要素の継続的な回転が保証され、前の試行で直面した問題が解決されます。

以上が無限の CSS 回転アニメーションを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。