CSS/アニメーション関連

アニメーション関連

この章では、CSSのアニメーション関連のプロパティとその使い方について解説します。アニメーションを使用することで、Webサイトに動きを与え、より魅力的でインタラクティブなユーザー体験を提供することができます。

アニメーションの基本

CSSアニメーションを作成するには、主に以下の2つのプロパティを使用します。

• @keyframes: アニメーションのキーフレームを定義します。
• animation: アニメーションの動作を設定します。

以下は簡単な例です。

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fadeIn 2s ease-in-out;
}

この例では、fadeIn という名前のアニメーションを定義し、.element クラスの要素に適用しています。要素は2秒かけて徐々に不透明になります。

アニメーション関連プロパティ

以下は、CSSアニメーションに関連するプロパティの一覧です。

• animation-name: 適用するアニメーションの名前を指定します。
• animation-duration: アニメーションの再生時間を指定します。
• animation-timing-function: アニメーションの速度曲線を指定します（例: ease, linear, ease-in, ease-out, cubic-bezier など）。
• animation-delay: アニメーションの開始までの遅延時間を指定します。
• animation-iteration-count: アニメーションの繰り返し回数を指定します（例: 1, infinite）。
• animation-direction: アニメーションの再生方向を指定します（例: normal, reverse, alternate）。
• animation-fill-mode: アニメーションの終了後の状態を指定します（例: none, forwards, backwards, both）。
• animation-play-state: アニメーションの再生状態を制御します（例: running, paused）。

アニメーションの応用例

複数のプロパティをアニメーション化

@keyframes slideAndFade {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.element {
  animation: slideAndFade 1.5s ease-out;
}

この例では、要素が横にスライドしながら徐々に不透明になります。

無限ループアニメーション

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

.spinner {
  animation: rotate 2s linear infinite;
}

この例では、要素が無限に回転し続けます。

アクセシビリティへの配慮

アニメーションを使用する際には、以下の点に注意してください。

• 長時間のアニメーションや急激な動きは、ユーザーの体調に影響を与える可能性があります。必要に応じて、prefers-reduced-motion メディアクエリを使用してアニメーションを無効化します。

@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

• アニメーションが重要な情報を伝える場合は、代替手段を提供してください。

まとめ

CSSアニメーションは、Webサイトに動きを加えるための強力なツールです。@keyframes と関連プロパティを理解することで、複雑なアニメーションを作成できます。アニメーションの使用にあたっては、アクセシビリティやパフォーマンスにも配慮することが重要です。