スクロールで要素フェードイン（CSS のみ）
JavaScript なし・Intersection Observer 不要で、要素がビューポートに入ったタイミングに応じてフェードイン演出を実装。animation-range で開始タイミング調整可能。
解説
スクロールして要素が画面に入ってきた瞬間に、カードがふわっと浮かび上がるフェードイン演出です。一般的にこの種の登場アニメーションは JavaScript の IntersectionObserver で要素の出現を監視して実装しますが、このサンプルは CSS の animation-timeline:view() だけで実現しています。animation-range:entry 0% cover 30% という指定で「要素が入り始めてから 30% ほど見えるまで」の間に透明から不透明へ、わずかに下から定位置へと動かしています。
サービス紹介ページの特徴セクション、実績カードの一覧など、順番に内容を見せて視線を導きたい場面に向きます。スクリプトを書かずに済むので保守が楽で、要素が増えても CSS の指定がそのまま効くのが利点です。
カスタマイズと注意点
- 動き出す量やタイミングは
animation-rangeの値で調整します。範囲を狭めると素早く、広げるとゆっくり現れます。 - 浮き上がる距離やフェードの度合いは
@keyframesの中身を編集します。 - 強い動きが苦手な利用者のため、
prefers-reduced-motionでアニメーションを無効化し、最初から表示する分岐を入れておくとアクセシビリティ面で安心です。未対応ブラウザでは要素はそのまま表示されます。
よくある質問
IntersectionObserver は必要ですか？
いいえ。このサンプルは CSS の animation-timeline:view() を使っているため、要素の出現監視を JavaScript で書く必要がありません。対応ブラウザではスクロールに合わせて自動でフェードインが発生します。
登場のスピードや動く量を変えられますか？
変えられます。タイミングは animation-range の値（entry や cover の割合）で調整し、浮き上がる距離やフェードの度合いは @keyframes の中身を編集します。範囲を狭めると素早く、広げるとゆっくり現れます。