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

DDD
リリース: 2024-11-06 13:12:02
オリジナル
751 人が閲覧しました

How to Create an Endless CSS Rotation Animation?

無限 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート