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

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

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

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

@-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);
  }
}

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

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

  Rotate

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

3.ブラウザの互換性の問題の修正:

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

.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 */
}

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