この記事は最終更新日から1年以上経過しています。
CSSでスクロール同期アニメーションを実現する
公開日：
更新日：
こんにちは。田村です。
CSSアニメーションの機能でスクロール位置とCSSアニメーションを同期させることが可能になるのをご存知でしょうか。
view-timeline と animation-timelineのプロパティを使うと、スクロール位置とCSSアニメーションを同期させることが可能になります。
今回は、view-timeline と animation-timeline の基本的な使い方を解説します！
※2025年1月時点では、Google Chrome、Edgeは対応していますが、Firefox、Safariは対応していません。
view-timeline と animation-timeline とは？
view-timelineとは？
view-timeline は、スクロール領域（ビューポート）に基づいたタイムラインを定義するためのプロパティです。
これにより、特定の要素がビューポート内にどの程度見えているかを計算し、その進捗をタイムラインとして利用できます。
animation-timelineとは？
animation-timeline は、アニメーションの進行をタイムラインに同期させるためのプロパティです。
通常のアニメーションは時間（animation-duration）で進みますが、animation-timeline を使うとスクロール量やタイムラインの進行によってアニメーションをコントロールできます。
どんな場面で使えるのか？
スクロール連動アニメーション
スクロールに合わせて要素がフェードイン・スライドインする
パララックス効果
進捗バーのアニメーション
ページのスクロール量に応じてプログレスバーを伸ばす
基本的な使い方
view-timeline を定義
要素にスクロール軸に沿ったタイムラインを指定します。
.scroll-container {
view-timeline-name: scroll-timeline; /* タイムライン名 */
view-timeline-axis: block; /* 縦方向のスクロールを使用 */
}
アニメーションに animation-timeline を設定
アニメーションをタイムラインに同期させます。
.animated-element {
animation: fade-in 1s linear both; /* アニメーション基本設定 */
animation-timeline: scroll-timeline; /* タイムラインと同期 */
animation-range: contain 0% contain 100%; /* タイムラインの範囲 */
}animation-rangeの動きは理解するのが難しいですので、View Timeline Ranges Visualizerツールを使うと視覚的に理解しやすいです。
確認してみてください。
注意点とブラウザ対応状況
2025年1月時点では、
Google Chrome、Edgeは対応していますが、Firefox、Safariは対応していません。
実際に使用する場合は、ブラウザの要件など確認して使用してください。
CSSでコマ送りのように動きを切り替えるアニメーション
こんにちは。田村です。 CSSアニメーションで、コマ送りのような「カクカク」と動きを切り替えるアニメーションを作りたい場合がありました。 そんなときはsteps() 関数を使うと実現可能です。 steps() とは？ steps() は、CSSアニメーションの animation-timing-function プロパティで使われる関数の一つです。 通常のアニメーションが滑らかに動くのに対し、steps() を使うと 「段階的に進むアニメーション」 を作ることができます。 どんな場面で使えるのか？ スプライトアニメーション 1枚の画像に複数のフレームを描き、steps() を使って特定のフレームごとに切り替えることができます。 コマ送りアニメーション 動画を再現するようなアニメーションをCSSで実現できます。 進行状況を表現 プログレスバーなど進行状況の表示に使用できます。 基本的な使い方 steps() 関数には、2つの主要な引数があります。 steps(段階数, タイミング) 段階数 アニメーションを何段階に分割するかを指定します。 steps(4) → 4段階の動き タイミング jump-none 0%と100%の状態を表示して間は均等に埋める jump-start / start コマの最初に動くので開始時0%の状態は見えない jump-end /end コマの最後に動くので終了時100%の状態が見えない jump-both startとendの動きをして間を埋めるので0%と100%の状態が見えない .element { /*アニメーションを4段階に分けて、各ステップが終了後に切り替わる。*/ animation: example 4s steps(4, end) infinite; } @keyframes example { from { background-position: 0 0; } to { background-position: -400px 0; } } まとめ steps()関数は段階的な動きが必要なアニメーションに利用できます。 また、start と end の使い分けで、タイミングを調整できます。 スプライトアニメーションやプログレスバー、コマ送りなど、幅広い用途に活用可能ですのでぜひ試してみてださい！
スタッフブログ
ユーザーの設定をCSSアニメーションに反映させる
こんにちは。田村です。 CSSアニメーションはリッチな動きが表現でき便利ですがユーザーによってはアニメーションをオフにしたいということがあります。 OS側で「動きをへらす」という設定があり、これをCSS側で判断したい場合はありました。 prefers-reduced-motion とは？ prefers-reduced-motion は、ユーザーのOSやブラウザの設定に基づいて、動きの多いアニメーションやエフェクトを制御するためのCSSメディアクエリです。 OSの設定で「動きを減らす」という設定が提供されており、この設定が有効になっているユーザーに対し、アニメーションを軽減するスタイルを適用できます。 次のように読むそうです。 prefers-reduced-motion（プリファーズ・リデュースド・モーション） prefers（プリファーズ）：好む reduced（リデュースド）：減少した motion（モーション）：動き どんな場面で使えるのか？ 動きが苦手なユーザーへの配慮 激しいアニメーションや過剰な動きを好まないユーザーに快適なユーザー体験を提供できます。 アクセシビリティ向上 WCAGの達成基準にも含まれています。 「達成基準 2.3.3: インタラクションによるアニメーションを理解する」 基本的な使い方 prefers-reduced-motion は、CSSのメディアクエリとして以下のように使います。 /* 通常時のスタイル */ .animated-box { animation: bounce 2s infinite; } /* 動きを抑える設定の場合 */ @media (prefers-reduced-motion: reduce) { .animated-box { animation: none; } } まとめ prefers-reduced-motion は、ユーザーが動きを減らす設定をしている場合に、アニメーションを無効化または軽減できるCSSメディアクエリです。 動きに敏感なユーザーにも優しい動きを提供し、アクセシビリティを向上することができます。
スタッフブログ
