animation

アニメーション・エフェクト

キーフレームアニメーションを制御するプロパティです。複雑なアニメーションを実現できます。

構文

Syntax

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>

コード例

例 1

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

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

実行結果

フェードインアニメーション

フェードイン効果

💡 最も基本的なアニメーション。ページ読み込み時によく使用

フェードインアニメーション - 最もよく使われる基本的なアニメーション

例 2

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

.slide-in {
  animation: slideInFromLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

実行結果

左からスライドイン - カスタムイージング関数を使用

スライドイン

💡 カスタムイージング関数で自然な動きを実現

左からスライドイン - カスタムイージング関数を使用

例 3

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation: bounce 2s infinite;
}

実行結果

バウンスアニメーション - 無限ループで注意を引く効果

バウンス効果

💡 注意を引きたい要素に使用。無限ループで動作

バウンスアニメーション - 無限ループで注意を引く効果

例 4

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.pulse-button {
  animation: pulse 2s infinite;
}

実行結果

脈動するボタン - スケールと影を組み合わせた注目効果

脈動ボタン

💡 スケールと影を組み合わせて注目を引く効果

脈動するボタン - スケールと影を組み合わせた注目効果

例 5

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

.loading-spinner {
  animation: rotate 1s linear infinite;
}

実行結果

回転アニメーション - ローディングスピナーに最適

💡 ローディングスピナーや読み込み中の表示に最適

回転アニメーション - ローディングスピナーに最適

例 6

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.error-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

実行結果

シェイクアニメーション（エラー時）

エラー発生！

💡 フォーム検証エラーやシステムエラーのフィードバックに使用

シェイクアニメーション - エラー時のフィードバックに使用

例 7

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.floating-element {
  animation: float 3s ease-in-out infinite;
  animation-delay: 0.5s;
  animation-fill-mode: both;
}

実行結果

浮遊アニメーション（遅延付き）

遅延浮遊要素

💡 animation-delay: 0.5s + animation-fill-mode: both で開始前の状態を制御

浮遊アニメーション - 遅延とfill-modeを活用

例 8

@keyframes flipIn {
  0% {
    transform: perspective(400px) rotateY(-90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flip-in {
  animation: flipIn 0.6s ease-in-out;
}

実行結果

3Dフリップインアニメーション

3D フリップ

💡 perspective()とrotateY()で立体的なフリップ効果を実現

3Dフリップイン - perspectiveを使った立体的なアニメーション

例 9

.multi-animation {
  animation: 
    fadeIn 0.5s ease-out,
    slideInFromLeft 0.5s ease-out,
    pulse 2s infinite 0.5s;
}

実行結果

複数アニメーションの同時実行

複数アニメーション

💡 カンマ区切りで複数のアニメーションを同時実行。それぞれ異なるタイミング設定可能

複数アニメーションの同時実行 - カンマ区切りで複数指定

💡 TIPS

transitionより複雑なアニメーションが可能。transform、opacity、filter以外のプロパティはパフォーマンスに影響するため注意。will-changeと組み合わせて最適化。animation-fill-modeでアニメーション前後の状態を制御。複数アニメーションはカンマ区切りで指定可能。

⚠️ よくある間違い

width、height、left、topなどのレイアウトプロパティをアニメーションするとパフォーマンスが悪化。animation-fill-mode: forwardsを忘れるとアニメーション後に元の状態に戻る。キーフレーム名の重複に注意。無限アニメーションの多用はバッテリー消費を増加させる。

ブラウザサポート

IE10+, 全モダンブラウザ

animation

構文

コード例

例 1

例 2

例 3

例 4

例 5

例 6

例 7

例 8

例 9

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート