10. アニメーションとトランジション

CSS は、Web ページに動きやエフェクトを加えるためにアニメーションとトランジションを提供します。これにより、ユーザーエクスペリエンスを向上させ、視覚的に魅力的なデザインを実現できます。本章では、CSS のアニメーションとトランジションの基本を学び、実際にコードを使って試してみることを目指します。

10.1 トランジション

10.1.1 トランジションの基本

トランジションは、CSS プロパティの変化をアニメーション化するために使用します。例えば、ホバー時に要素の色を滑らかに変えたい場合に使えます。

10.1.2 トランジションのプロパティ

トランジションには以下のプロパティがあります:

transition-property: アニメーションさせたいプロパティ名を指定します。
transition-duration: アニメーションの所要時間を指定します。
transition-timing-function: 変化のペースを指定します。
transition-delay: アニメーションを開始するまでの遅延時間を指定します。

10.1.3 トランジションの例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: blue;
        transition: background-color 0.5s ease;
      }
      .box:hover {
        background-color: red;
      }
    </style>
    <title>トランジションの例</title>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

10.2 アニメーション

10.2.1 アニメーションの基本

CSS アニメーションを使用すると、要素のスタイルを段階的に変化させることができます。@keyframesを使用してアニメーションの各ステップを定義し、animationプロパティを使ってアニメーションを適用します。

10.2.2 アニメーションのプロパティ

アニメーションには以下のプロパティがあります:

animation-name: 使用するアニメーションの名前を指定します。
animation-duration: アニメーションの所要時間を指定します。
animation-timing-function: 変化のペースを指定します。
animation-delay: アニメーションを開始するまでの遅延時間を指定します。
animation-iteration-count: アニメーションを繰り返す回数を指定します。
animation-direction: アニメーションの再生方向を指定します。

10.2.3 アニメーションの例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      @keyframes move {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(100px);
        }
        100% {
          transform: translateX(0);
        }
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: green;
        animation: move 2s infinite;
      }
    </style>
    <title>アニメーションの例</title>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

10.3 トランジションとアニメーションの応用

10.3.1 実践的な例

ここでは、トランジションとアニメーションを組み合わせて実際の Web ページを作る例を示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: purple;
        transition: transform 1s;
      }
      .box:hover {
        transform: scale(1.5);
        animation: rotate 2s linear infinite;
      }
    </style>
    <title>トランジションとアニメーションの応用</title>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

10.3.2 まとめ

この章では、CSS のトランジションとアニメーションの基本から実践までを学びました。どちらも Web ページに動きと魅力を加える重要な技術ですので、ぜひ理解を深めて、多様なエフェクトを試してみてください。