Wikibooks

CSS/アニメーション関連

< 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 と関連プロパティを理解することで、複雑なアニメーションを作成できます。アニメーションの使用にあたっては、アクセシビリティやパフォーマンスにも配慮することが重要です。

"https://ja.wikibooks.org/w/index.php?title=CSS/アニメーション関連&oldid=267278" より作成