CSSだけで実装するスクロール駆動アニメーションガイド

• 別途JSやライブラリなしで、CSSだけでスクロール連動アニメーションを実装可能
• animation-timeline: scroll() / view() などのCSSプロパティにより、スクロール位置やビューポートへの進入に応じてアニメーションを進行
• animation-range プロパティで、アニメーションをビューポート内のどの区間で開始・終了するかを詳細に調整
• 動きに敏感なユーザーのために prefers-reduced-motion メディアクエリの活用を推奨
• Safari 26 betaから対応し、CSSベースのスクロールアニメーションの活用範囲が大きく広がる

---

スクロールベースアニメーションの3つの要素

• Target: アニメーションを適用する対象要素（例: プログレスバー、画像など）
• Keyframes: スクロールに応じてどのような変化が起きるかを定義（既存のCSS @keyframes と同じ）
• Timeline: アニメーションがいつ、どのように進行するかを決定（時間ベースではなくスクロール/ビュー ベース）

CSSにおけるTimeline

• 従来のCSSアニメーションは基本的に document timeline（時間ベース）を使用
• animation-timeline プロパティの導入（CSS Animations Level 2、2023年）により、時間以外にも スクロール、ビューポートへの進入 など多様な基準でアニメーションを進行可能

scroll() timeline

• scroll() タイムラインは、ユーザーがスクロールしたときにだけアニメーションが進行
• 例: 下部のプログレスバーがスクロールに応じて左から右へ満ちていく効果

  footer::after {  
    content: "";  
    height: 1em;  
    width: 100%;  
    background: rgba(254, 178, 16, 1);  
    left: 0;  
    bottom: 0;  
    position: fixed;  
    animation: grow-progress linear;  
    animation-timeline: scroll();  
  }  
  @keyframes grow-progress {  
    from { transform: scaleX(0); }  
    to { transform: scaleX(1); }  
  }  
  

• animation-timeline は animation プロパティの後に定義しないと正常に動作しない

モーションアクセシビリティへの配慮

• モーションに敏感なユーザーを保護するため、prefers-reduced-motion メディアクエリの使用を推奨

  @media not (prefers-reduced-motion) {  
      /* 애니메이션 코드 */  
  }  
  

view() timeline

• view() タイムラインは、ターゲット要素が ビューポートに現れたとき にアニメーションが開始
• 例: スクロール時に画像が右側からスライドしながらフェードイン

  @keyframes slideIn {  
    0% {  
      transform: translateX(100%);  
      opacity: 0;  
    }  
    100% {  
      transform: translateX(0%);  
      opacity: 1;  
    }  
  }  
  img {  
    animation: slideIn;  
    animation-timeline: view();  
  }  
  

animation-rangeで進行区間を制御

• 基本的にanimation-rangeは 0%（ビューポート進入）〜100%（完全に離脱）

• 例: ビューポートの50%区間までのみアニメーションを進行

  img {  
    animation: slideIn;  
    animation-timeline: view();  
    animation-range: 0% 50%;  
  }  
  

• ユーザー体験のために適切なrange値の設定が必要

• モーションアクセシビリティに配慮する場合は、prefers-reduced-motion と併用

  @media not (prefers-reduced-motion) {  
    img {  
      animation: slideIn;  
      animation-timeline: view();  
      animation-range: 0% 50%;  
    }  
  }  
  

高度な活用と次のステップ

• scroll()、view() は関数であり、scroller要素（デフォルト: nearest）や軸（block、inline、x、y）などさまざまなオプションを指定可能
• animation-range、entry/exit などにより、より繊細なUXを実装可能
• Safari 26 beta など最新ブラウザで先行対応しており、今後徐々に標準化と対応拡大が進む見込み

[shakespeare]

animation-timeline だけで実装できるんですね。すごいですね！