CSSアニメーションを使用して画像を連続的に回転させる方法

このクイックチュートリアルでは、CSSアニメーションプロパティを使用して画像を連続的に回転させる方法を学習します。

まず、画像といくつかの属性を含むHTMLマークアップが必要です。

<img
  src="/article/uploadfiles/202203/2022033109325250.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

画像は次のように表示されます：

ご覧のとおり、画像要素には3つのクラスがあります。rotate 、linear およびinfinite 。 CSSスタイルシートでは、クラスごとに宣言ブロックを作成する必要があります。これらのタイプのクラスは、ユーティリティと呼ばれることもあります。 またはヘルパー クラスですが、私は単一目的という用語を好みます より説明的だからです。

まず、.rotateを宣言しましょう コードブロック：

.rotate {
  animation: rotation 2s;
}

アニメーションプロパティの回転関数を定義する必要があるため、まだ何も起こりません。このCSSキーフレームルールをスタイルシートに追加します：

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

これで、ブラウザタブをリロードすると、画像が2秒間に1回回転するのがわかります（2s ）。しかし、さらに2つのことを行う必要があります。画像を継続的に回転させ、アニメーションの遷移タイミングをデフォルトのeaseから変更します。 linearと呼ばれる一貫した速度曲線に 。

この.linearを追加します CSSスタイルシートへの宣言ブロック：

.linear {
  animation-timing-function: linear;
}

ブラウザタブをリロードすると、画像が最初から最後まで一定の速度で回転していることがわかります。

最後に、.infiniteを宣言して、画像を無限に回転させましょう。 クラスのコードブロック：

.infinite {
  animation-iteration-count: infinite;
}

これで、アニメーションの速度曲線が直線的になり、無限に/連続的に回転する画像ができました。

CodePenで完全なコードをチェックしてください

注：次のように、すべてのアニメーションプロパティを1行と1つのクラスで宣言することもできます。

.rotate-image {
  animation: rotation 2s linear infinite;
}

上記は多くのコードを節約しますが、個々のコンポーネントがどのように連携するかを理解しやすくするため、学習/教育では、物事をより小さなバイトに分割することを好みます。

デフォルトのeaseの横に多くのアニメーションカーブがあります およびlinear ここで使用します。 cubic-bezierを使用すると本当に凝ったものになります アニメーション曲線ですが、別のチュートリアルのために保存しておきます。