アイコンの無限の CSS 回転アニメーションを作成するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-11-05 21:53:02
オリジナル
196 人が閲覧しました

How do I create an endless CSS rotation animation for an icon?

無限の CSS 回転アニメーション: アイコンを連続的に回転させる方法

CSS を使用してアイコンの無限の回転を実現するには、CSS アニメーションの組み合わせを使用します。そしてキーフレームが必要です。次の手順は、解決策の概要を示しています。

1.キーフレームの追加:

2 つのキーフレームを定義します。1 つは回転の開始 (0 度) で、もう 1 つは回転の終了 (360 度) です。これにより、スムーズな移行が保証されます。

<code class="css">@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}</code>
ログイン後にコピー

2.アニメーションの適用:

CSS アニメーション プロパティを使用して、作成したキーフレーム アニメーションを回転したい要素に適用します。このプロパティには、キーフレーム名、期間、ループ動作 (無限) の 3 つのパラメーターが必要です。

<code class="html"><div class="rotating">
  Rotate
</div></code>
ログイン後にコピー
<code class="css">.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>
ログイン後にコピー

3.ブラウザの互換性に関する問題の修正:

さまざまなブラウザ間の互換性を確保するために、WebKit ベースのブラウザ (Chrome、Safari) のベンダー プレフィックスと、他のブラウザの標準プロパティが含まれています。

<code class="css">.rotating {
  -webkit-animation: rotating 2s linear infinite; /* Safari and Chrome */
  -moz-animation: rotating 2s linear infinite;    /* Firefox */
  -ms-animation: rotating 2s linear infinite;     /* IE */
  animation: rotating 2s linear infinite;         /* Standard */
}</code>
ログイン後にコピー

これらの手順に従うことで、CSS を使用してアイコンやその他の要素の無限回転アニメーションを簡単に作成できます。

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

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