アイコンを読み込むための無限の CSS 回転アニメーションを作成するには?

エンドレス CSS 回転アニメーション

読み込みアイコンはユーザー エクスペリエンスに不可欠であり、Web サイトの読み込み中に視覚的なフィードバックを提供します。 CSS を使用してこれらのアイコンの回転をカスタマイズすると、機能性と見た目の美しさを向上させることができます。ただし、CSS で無限回転を実装するのは難しい場合があります。

次の例を考えてみましょう。

#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

<div id="test" class="rotating"></div>

この CSS は直感的に見えますが、意図した無限回転を生成できません。読み込み中のアイコン。無限の回転を実現するには、変換ではなくキーフレームを使用してアニメーションを適用する必要があります。

キーフレームを使用した修正された CSS は次のとおりです:

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

この修正されたコードにより、読み込みアイコンのスムーズかつ連続的な回転が保証されます。機能性と見た目の魅力を無期限に強化します。

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