CSSアニメーションで画像を無限に回転させる方法【初心者向け】

CSSのanimationプロパティを使えば、画像を連続的に回転させることができます。このチュートリアルでは、初心者の方にもわかるよう、手順を一つずつ丁寧に解説していきます。

HTMLマークアップの準備

まず、画像と属性を含むHTMLマークアップを用意します。

<img
  src="https://jp.wsxdn.com/UploadFiles_5590/202203/2022033109325250.png"
  class="rotate linear infinite"
  width="150"
  height="150"
/>

ブラウザで表示すると、画像は次のように見えます。

3つのクラスの役割

ご覧のとおり、img要素にはrotate、linear、infiniteという3つのクラスが指定されています。CSS側では、それぞれのクラスに対して宣言ブロックを作成していきます。このようなクラスは「ユーティリティクラス」や「ヘルパークラス」と呼ばれることもありますが、役割がひとつずつ明確なので、筆者は「単一目的（single-purpose）クラス」と呼ぶのが好きです。

ステップ1：rotateクラスでアニメーションを定義する

まずは.rotateのコードブロックを宣言します。

.rotate {
  animation: rotation 2s;
}

この段階ではまだ何も起こりません。animationプロパティで指定したrotationというアニメーションの中身を定義する必要があるためです。スタイルシートに次の@keyframesルールを追加しましょう。

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

ここでブラウザを再読み込みすると、画像が2秒（2s）かけて1回だけ回転するのが確認できます。しかし、これだけでは目標達成には足りません。「連続的に回転し続ける」ようにしつつ、デフォルトのイージング（ease）ではなく、一定速度で動くlinearへタイミング関数を変更する必要があります。

ステップ2：linearクラスで等速回転にする

次の.linear宣言ブロックをスタイルシートに追加します。

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

再読み込みすると、画像が最初から最後まで一定の速度で回転するようになります。

ステップ3：infiniteクラスで無限ループさせる

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

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

これで完成です。等速のアニメーションカーブで、無限に回転し続ける画像ができあがりました。

完全なコードはCodePenでも確認できます。

1行でまとめて書く方法

なお、アニメーション関連のプロパティをすべて1行・1クラスにまとめて記述することも可能です。

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

上記の書き方はコード量を大幅に減らせますが、学習や教育の場面では、個々のコンポーネントがどう組み合わさって動作するのかを理解しやすくするため、小さな単位に分解して説明するほうが効果的だと筆者は考えています。

さまざまなアニメーションカーブ

アニメーションの速度カーブには、デフォルトのeaseや今回使用したlinear以外にも多数の種類があります。cubic-bezierを使えば、より凝った動きも表現できますが、その詳細はまた別のチュートリアルで紹介したいと思います。