elite-css-animations

高度な CSS アニメーション

JavaScript が不要な、最新の CSS アニメーション機能です。

クイックリファレンス

トピック	参照ファイル
スクロール駆動 API	scroll-driven-api.md
ビュートランジション	view-transitions.md
@property ルール	property-rule.md
ビジュアルエフェクト	visual-effects.md

---

CSS と GSAP の選択ガイド

CSS を使う場合：

• シンプルな表示・フェードアニメーション
• スクロールに連動する進捗インジケーター
• ホバー／フォーカス状態のトランジション
• パフォーマンスが最優先の場合（メインスレッド外で処理）
• Safari のサポートが重要ではない場合（スクロール駆動アニメーション）
• JavaScript を最小限に抑えたい場合

GSAP を使う場合：

• 複数要素による複雑なシーケンス
• ピン留め／スティッキー動作が必要な場合
• 横スクロールするセクション
• クロスブラウザーの一貫性が重要な場合
• 細かな制御（スナップ付きスクラブ）
• タイムラインのオーケストレーション

ハイブリッドアプローチ

シンプルなインタラクションには CSS、複雑なシーケンスには GSAP を使います。

/* CSS: Hover states, simple transitions */
.card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

// GSAP: Complex scroll-driven sequences
gsap
  .timeline({
    scrollTrigger: { trigger: ".section", scrub: 1 },
  })
  .from(".title", { opacity: 0, y: 50 })
  .from(".content", { opacity: 0 }, "-=0.3");

---

ブラウザーのサポート（2026）

機能	Chrome	Firefox	Safari	Edge
スクロール駆動アニメーション	✓ 115+	✓ 132+	✗（ポリフィル）	✓ 115+
ビュートランジション	✓ 111+	✗	✓ 18+	✓ 111+
@property	✓ 85+	✓ 128+	✓ 15.4+	✓ 85+
clip-path アニメーション	✓	✓	✓	✓
backdrop-filter	✓	✓	✓	✓

---

スクロール駆動アニメーションのクイックスタート

/* Progress bar that fills as you scroll */
.progress-bar {
  transform-origin: left;
  transform: scaleX(0);
  animation: progress linear;
  animation-timeline: scroll();
}

@keyframes progress {
  to {
    transform: scaleX(1);
  }
}

/* Respect motion preference — show the full bar, no scroll-linked motion */
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transform: scaleX(1);
    animation: none;
  }
}

/* Element reveals as it enters viewport */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: fadeIn linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Safari のポリフィル

<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>

完全なパターンについては、scroll-driven-api.md をご覧ください。

---

ビュートランジションのクイックスタート

// Simple page transition
document.startViewTransition(() => {
  // Update the DOM
  updateContent();
});

/* Customize the transition */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

SPA との統合については、view-transitions.md をご覧ください。

---

@property のクイックスタート

これまでアニメーションできなかった CSS カスタムプロパティをアニメーションさせます。

@property --progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.progress-circle {
  --progress: 0;
  background: conic-gradient(
    var(--color-accent) calc(var(--progress) * 360deg),
    transparent 0
  );
  transition: --progress 1s ease-out;
}

.progress-circle.complete {
  --progress: 1;
}

グラデーションのアニメーションなどについては、property-rule.md をご覧ください。

---

ビジュアルエフェクトのクイックスタート

Clip-Path による表示

.reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  clip-path: inset(0 0 0 0);
}

Backdrop Filter

.glass {
  backdrop-filter: blur(10px) saturate(180%);
  background: rgba(255, 255, 255, 0.7);
}

Mix Blend Mode

.text-overlay {
  mix-blend-mode: difference;
  color: white;
}

クリエイティブなパターンについては、visual-effects.md をご覧ください。

---

prefers-reduced-motion

動きを使う場合は、必ず設定の確認で囲みます。

/* Default: No animation */
.animated {
  opacity: 1;
  transform: none;
}

/* Only animate if user allows */
@media (prefers-reduced-motion: no-preference) {
  .animated {
    animation: fadeIn 0.6s ease-out;
  }
}

---

パフォーマンスのベストプラクティス

コンポジターで処理されるプロパティのみをアニメーションさせる

/* GOOD - GPU accelerated */
.card {
  transition:
    transform 0.3s,
    opacity 0.3s;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 0.9;
}

/* BAD - Triggers layout/paint */
.card:hover {
  width: 110%;
  margin-left: -5%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

will-change は控えめに使う

/* Apply only during animation */
.animating {
  will-change: transform, opacity;
}

/* Remove after animation */
.animation-complete {
  will-change: auto;
}

contain プロパティ

/* Isolate expensive effects */
.animated-section {
  contain: layout style paint;
}

---

よく使うパターン

滑らかなホバートランジション

.card {
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

時差をつけた登場

.item {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.item:nth-child(1) {
  animation-delay: 0.1s;
}
.item:nth-child(2) {
  animation-delay: 0.2s;
}
.item:nth-child(3) {
  animation-delay: 0.3s;
}
/* ... or use CSS custom properties */

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

ローディングスピナー

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

---

リソース

• MDN：CSS アニメーション
• MDN：スクロール駆動アニメーション
• Chrome：ビュートランジション
• キュービックベジェジェネレーター