【簡単！】CSSアニメーションの回転の実装方法を詳しく解説

CSSの回転アニメーションは、Webページやアプリのデザインに動きを加えて魅力的に見せたい場合に非常に有効です。

本記事では、CSSを使って要素を滑らかに回転させる方法や、基本的な使い方から応用方法まで、詳しく説明していきます。

CSSアニメーションについてより詳しく知りたい方はこちらをご覧ください。

MDN Web Docs

CSS アニメーションの使用 - CSS: カスケーディングスタイルシート | MDN CSS アニメーションにより、ある CSS のスタイル設定を別の設定へと遷移させることができます。アニメーションは、2 種類の要素で構成されています。 それは、アニメーショ...

CSSアニメーションの回転のメリット

   回転のアニメーションは、ユーザーの目を惹きつけやすく、魅力のあるWebサイトが作成できます。

   また、CSSのみで回転アニメーションが実装可能なので、複雑なコードを書く必要がありません。また、他のCSSプロパティと組み合わせることで、さらに多様なアニメーション効果を作れるので、ユニークなWebサイトを作成できるでしょう。

CSSアニメーションの回転の実装方法

CSSの主な回転方法は、`@keyframes`を使って、要素を360度回転させるシンプルな方法です。

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateAnimationはアニメーションの定義で、fromステップで0度（初期状態）から、toステップで360度回転させます。

このコードを使うと、要素が無限にスムーズに回転するアニメーションが実装できます。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

rotate クラスは、回転させたい要素に適用します。animationプロパティで、rotateAnimationという名前のアニメーションを5秒間の周期で無限に実行するように設定しています。linearは一定速度で回転させるための指定です。

回転アニメーションの応用方法

CSSアニメーションの回転は、さまざまな応用が可能です。以下にいくつかの応用例と、それぞれの実装コードを紹介します。

ホバー時に回転アニメーション

ホバー（マウスオーバー）したときに回転させるアニメーションです。ユーザーがインタラクションを行った際に回転することで、ボタンやロゴなどにダイナミックな効果を加えます。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

HTML部分では、<div class="rotate-box"> という要素を定義し、回転アニメーションを適用するためのコンテナを作成しています。

CSS部分では、@keyframes を使って、rotateAnimation というアニメーションを定義し、このアニメーションは0度から360度まで回転します。

.rotate-box クラスに対して、animation プロパティを適用し、5秒ごとに無限ループで回転する設定です。

要素がクリックされた時に1回だけ回転

クリックされたときに1度だけ回転するアニメーションです。ユーザーがクリックした際にボタンやアイコンが一瞬回転する効果を作り出せます。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

HTML部分では、隠された<input type="checkbox">要素と、それに関連付けられた<label>要素を使用し、labelをクリックすると、checkboxがトグルされます。

CSS部分では、checkboxがチェックされたときに、回転アニメーションがlabel（.rotate-box）に適用されるようにしています。

アニメーションは1秒で完了し、forwardsでアニメーション終了時にその状態を維持する設定です。

#rotateToggle:checked + .rotate-box で、checkboxがチェックされたときのアニメーションをトリガーしています。

3D回転アニメーション

2D回転ではなく、3D空間で要素を回転させる例です。奥行き感を出し、より立体的な効果を作り出すことができます。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

HTML部分では、<div class="rotate-box">という要素を定義しています。この要素が3D回転の対象です。

CSS部分では、@keyframes rotateAnimationを使用して、X軸とY軸を中心にした3D回転を定義しています。

rotate3d(1, 1, 0, 360deg) は、X軸とY軸に沿った3D回転を表し、animationプロパティでアニメーションが3秒かけて無限に繰り返される設定です。

また、transform-style: preserve-3d により、要素が3D空間内で回転するように指定しています。

複数の要素が連続して回転するアニメーション

複数の要素が順番に回転するアニメーションです。ローディング画面や目を引くデザイン要素として利用できます。

実装例

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

HTML部分では、<div class="rotate-box"></div>を3つ用意しています。これが回転する対象の要素です。

CSS部分では、すべての要素に対してrotateAnimationアニメーションを3秒で無限に繰り返すように設定しています。

2番目の要素には0.5秒の遅延、3番目の要素には1秒の遅延を追加しています。これが、各要素が順番に回転する仕組みです。

また、nth-child(2)とnth-child(3)で2番目と3番目の要素に対して異なるアニメーションの遅延時間を設定しています。

まとめ

以上、CSSで回転アニメーションを実装する方法を解説しました。

回転アニメーションは、Webサイトを魅力的に見せる非常に有効な方法です。様々な回転アニメーションを駆使し、ユーザーを惹きつける魅力的なWebサイトを作成していきましょう！

是非、本記事で紹介した方法を活用してみてください。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

↓