view-timelineでスクロール連動アニメーションをCSSだけで実装する方法｜最新仕様解説

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

スクロールに合わせたアニメーション、今やWebデザインでは定番の表現ですよね。
従来はJavaScriptやIntersection Observerを使って「要素がビューポートに入ったかどうか」を判定し、そのタイミングでCSSクラスを付与する方法が主流でした。

しかし、CSSだけでスクロール位置をトリガーにしたアニメーションができたら便利だと思いませんか？
そこで登場するのがview-timeline。

これはCSS Scroll-linked Animations仕様の一部で、要素がビューポート内でどの位置にあるかをタイムライン化してアニメーションさせる画期的な機能です。

この記事では、view-timelineの仕組みから基本コード、応用テクニックまで、実際のデザインワークに活かせるレベルで解説します。

view-timelineとは？

view-timelineは、要素の可視範囲（ビューポート内での位置）をタイムラインとして扱い、スクロール連動アニメーションをCSSだけで制御できる新機能です。

基本コード：スクロール連動フェードイン

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

これにより、要素が画面に入ると同時にアニメーションが進行し、出るときに終了するというスムーズな動きが実現できます。

応用：複数要素の順番アニメーション

複数の要素に対して view-timeline を設定すれば、セクション単位のスクロールアニメーションを実現可能。

.item {
  view-timeline-name: --item-tl;
  view-timeline-axis: block;
}
.item-content {
  animation: fadeIn 1s both;
  animation-timeline: --item-tl;
  animation-range: entry 0% exit 100%;
}

• 各アイテムごとに独立したタイムラインが生成される
• 複数のアニメーションを組み合わせると「流れる演出」が可能
• グリッドやカードレイアウトと相性抜群

対応ブラウザと注意点

まとめ

CSSだけで作れるスクロール連動表現！
view-timelineは、これまでJavaScript頼みだったスクロール演出をCSSだけで可能にする新仕様。
シンプルなフェードインから複雑なシーケンスアニメーションまで、表現の幅が一気に広がります。
今後のブラウザ対応の進展に合わせて、実案件への導入も現実的になっていくでしょう。

 

satokotadesignキャンペーン実施中！