Widely available 安心して使用可能。すべての主要ブラウザで広くサポートされている。
アニメーション Widely available

CSS Animations (@keyframes)

@keyframes でアニメーションのステップを定義し、animation プロパティで要素に適用する。duration・timing-function・delay・iteration-count などを細かく制御でき、JS なしで複雑なアニメーションが実現できる。すべての主要ブラウザで長年サポートされている。

アニメーションキーフレーム

概要

@keyframes でアニメーションのステップを定義し、animation プロパティで要素に適用する。duration・timing-function・delay・iteration-count などを細かく制御でき、JS なしで複雑なアニメーションが実現できる。すべての主要ブラウザで長年サポートされている。

対応ブラウザ

デスクトップ

Chrome 43+
Edge 12+
Safari 9+
Firefox 16+

モバイル

Chrome Android 43+
Safari iOS 9+
Firefox Android 16+

基本構文

CSS 
/* バウンドするアニメーション */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.ball {
  animation: bounce 0.8s ease-in-out infinite;
}

/* 回転アニメーション */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1.5s linear infinite;
}

/* パルスアニメーション */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

実務での使いどころ

  • ローディングアニメーション

    スピナーやプログレスバーなど、繰り返しのアニメーションをCSSだけで実装できる。

  • 注目を引くUI演出

    要素の出現時にフェードインやスライドインを加え、ユーザーの視線を誘導する。

注意点

  • 過度なアニメーションはユーザー体験を損なうため、必要最小限にとどめる。
  • prefers-reduced-motion メディアクエリでアニメーションを無効化できるようにする。

アクセシビリティ

  • prefers-reduced-motion: reduce に対応し、動きに敏感なユーザーへの配慮を行う。

参考リンク