アイコンの無限の CSS 回転アニメーションを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-05 21:53:02

オリジナル

226 人が閲覧しました

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