Limited support 限定的。Chrome・Edgeで対応、Firefox未対応、Safari 26から対応予定。プログレッシブエンハンスメントとして使用。
アニメーション Limited support

Scroll-driven animations

scroll-timeline や view-timeline を使い、スクロール位置に応じてアニメーションを進行させる。従来JSのscrollイベントやIntersection Observerで実装していたスクロール連動アニメーションが、CSSだけで高パフォーマンスに実現できる。プログレスバーやパララックス効果に最適。

アニメーションスクロール

概要

scroll-timeline や view-timeline を使い、スクロール位置に応じてアニメーションを進行させる。従来JSのscrollイベントやIntersection Observerで実装していたスクロール連動アニメーションが、CSSだけで高パフォーマンスに実現できる。プログレスバーやパララックス効果に最適。

対応ブラウザ

デスクトップ

Chrome 115+
Edge 115+
Safari 26+
Firefox 未対応

モバイル

Chrome Android 115+
Safari iOS 26+
Firefox Android 未対応

基本構文

CSS 
.progress-bar {
  animation: grow-progress linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

実務での使いどころ

  • スクロールプログレスバー

    ページのスクロール量に応じてプログレスバーが伸びるUIをCSSだけで実装。

  • スクロール連動フェードイン

    要素がビューポートに入る際にフェードインするアニメーションをJSなしで実現。

注意点

  • Firefoxは未対応のため、JSフォールバックを用意する必要がある。
  • 複雑なスクロールアニメーションはモバイルでのスクロール体験を損なう可能性がある。

フォールバック戦略

CSS 
/* JS フォールバック: Intersection Observer で代替 */
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

アクセシビリティ

  • スクロール連動アニメーションは prefers-reduced-motion で無効化し、コンテンツが即座に表示されるようにする。

参考リンク