CSS3でローディングアイコンやプレゼンテーションをもっと魅力的に！画像回転アニメーションの応用例

2024-05-19

CSS3を使って画像を回転させるアニメーションの作り方

必要なもの

画像ファイル
テキストエディタ (メモ帳など)
Webブラウザ

基本的な回転アニメーション

HTMLファイルを作成し、回転させたい画像を <img> タグで挿入します。

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 回転アニメーション</title>
  <style>
    /* スタイル定義 */
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明">
</body>
</html>

CSSファイルを作成し、以下のスタイルを記述します。このスタイルは、画像を360度回転させるアニメーションを定義します。

img {
  animation: rotate 2s linear infinite;
}

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

animation プロパティ:
- rotate: アニメーションの名前を指定します。
- 2s: アニメーションの再生時間を2秒に設定します。
- linear: アニメーションの速度を一定に保ちます。
- infinite: アニメーションを繰り返し再生します。
@keyframes rotate: アニメーションのキーフレームを定義します。
- from: アニメーションの開始時の状態を定義します。ここでは、画像を0度回転させます。

ブラウザでHTMLファイルを開くと、画像が360度回転するアニメーションが再生されます。

アニメーションのカスタマイズ

上記の例では、基本的な回転アニメーションを作成しました。以下では、アニメーションをさらにカスタマイズする方法をいくつか紹介します。

回転速度を変更する: animation-duration プロパティを使って、アニメーションの再生時間を変更できます。例えば、以下のコードは、アニメーションの再生時間を1秒に変更します。

img {
  animation: rotate 1s linear infinite;
}

回転方向を変更する: transform: rotate() 関数の引数に負の値を指定すると、画像を反時計回りに回転させることができます。例えば、以下のコードは、画像を反時計回りに360度回転させます。

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

img {
  animation: rotate 2s ease-in-out infinite;
}

複数の回転を組み合わせる: 複数のキーフレームを定義することで、より複雑な回転アニメーションを作成できます。例えば、以下のコードは、画像をまず30度回転させ、次に180度回転させるアニメーションを定義します。

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(30deg);
  }
  60% {
    transform: rotate(210deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

回転アニメーションは、ローディングアイコンやプレゼンテーションなど、様々な場面で利用することができます。

このチュートリアルが、CSS3を使って画像を回転させるアニメーションを作成

CSS3 回転アニメーションサンプルコード

基本的な回転アニメーション

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 回転アニメーション</title>
  <style>
    img {
      animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明">
</body>
</html>

アニメーションのカスタマイズ

1 回転速度を変更する

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 回転アニメーション</title>
  <style>
    img {
      animation: rotate 1s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 回転アニメーション</title>
  <style>
    img {
      animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(-360deg);
      }
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明">
</body>
</html>

3 イージングを変更する

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 回転アニメーション</title>
  <style>
    img {
      animation: rotate 2s ease-in-out infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明">
</body>
</html>

4 複数の回転を組み合わせる

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 回転アニメーション</title>
  <style>
    img {
      animation: rotate 2s linear infinite;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      30% {
        transform: rotate(30deg);
      }
      60% {
        transform: rotate(210deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明">
</body>
</html>

補足

上記のコードはあくまで一例であり、必要に応じて変更することができます。
アニメーションの効果は、使用するブラウザやデバイスによって多少異なる場合があります。

CSS3を使って画像を回転させるアニメーションを作成するその他の方法

transition プロパティは、要素の状態が変化する際に、滑らかなアニメーションを適用することができます。画像を回転させる場合、以下のコードのように transform プロパティを transition プロパティと組み合わせて使用することができます。

img {
  transition: transform 1s ease-in-out; /* アニメーションの設定 */
}

img:hover {
  transform: rotate(30deg); /* マウスホバー時に画像を30度回転 */
}

このコードでは、画像にマウスホバーすると、30度回転するアニメーションが適用されます。 transition プロパティで設定したアニメーション設定が適用されます。

SVGを使う

SVG (Scalable Vector Graphics) は、ベクター画像を記述するための言語です。 SVGには、アニメーションを作成するための機能が組み込まれているので、画像を回転させるアニメーションを簡単に作成することができます。以下の例は、SVGを使って画像を回転させるアニメーションを作成する方法を示しています。

<svg width="200" height="200">
  <image x="0" y="0" width="200" height="200" href="image.jpg" />

  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0 100 100"
    to="360 100 100"
    dur="2s"
    repeatCount="indefinite" />
</svg>

このコードは、image 要素に回転アニメーションを適用します。アニメーションは2秒間続き、無限に繰り返されます。

JavaScriptを使って、より複雑な画像回転アニメーションを作成することができます。例えば、以下のコードは、ボタンをクリックすると画像が回転するアニメーションを作成します。

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 回転アニメーション</title>
  <style>
    img {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="画像の説明">
  <button onclick="rotateImage()">回転</button>

  <script>
    function rotateImage() {
      var img = document.querySelector('img');
      img.style.transform = 'rotate(30deg)'; /* 画像を30度回転 */
    }
  </script>
</body>
</html>