CSSスクロール駆動アニメーション：段階的テキスト表示

この例は、段階的なテキスト表示効果を作成するためのCSSスクロール駆動アニメーションを実演しています。各行のテキストはスクロール位置に基づいて独立してアニメーションし、正確なタイミング制御でフェードインしながら上にスライドします。

主な特徴：

• JavaScriptを使用しない純粋なCSS実装
• animation-timeline: view()を使用したスクロールトリガーアニメーション
• CSSカスタムプロパティで制御される段階的な遅延
• スムーズなフェードとスライドアニメーション
• すべての画面サイズに対応したレスポンシブデザイン
• 現代的な美学のためのグラスモーフィズムスタイリング

このアニメーションは、コンテナ内のスクロール進行を追跡するためにview()タイムライン関数を使用し、各行はそのインデックスに基づいて異なるエントリーオフセットを持っています。