【CSS Modules】animation-range-endプロパティの使い方

animation-range-endプロパティは、CSSアニメーションやWeb Animations APIにおけるアニメーションの適用範囲の終了点を定義するために使用されるプロパティです。このプロパティは、特にスクロール進捗と連動するアニメーションにおいて、いつアニメーションが終了するかを正確に制御する役割を担います。ウェブページ内の特定の要素が表示されたり、スクロール位置が変化したりするのに合わせてアニメーションの進行を調整したい場合に非常に有用です。

指定できる値には、初期値の「normal」の他に、ピクセルなどの絶対値を指定する「<length>」、親要素やスクロールコンテナに対する相対的な割合を示す「<percentage>」があります。また、「entry」、「exit」、「cover」、「contain」といったキーワードを使用することで、対象要素がビューポート（表示領域）に対してどの位置に到達したかを基準に終了点を設定できます。例えば、「entry」は要素の開始点がビューポートに入った時、「exit」は要素の終了点が出た時などを表し、これらのキーワードはスクロール位置と要素の相対的な位置関係に基づいてアニメーションの終了点を決定します。

このプロパティは、animation-range-startプロパティと組み合わせて使用することで、アニメーションが開始する点から終了する点までの範囲を明示的に設定することが可能となります。これにより、ユーザーがスクロールするにつれて要素がフェードアウトしたり、特定の動きが停止したりするような、より動的でインタラクティブなユーザー体験を実現できます。このプロパティを適切に活用することで、スクロール駆動型のアニメーションの挙動をきめ細かく制御し、表現豊かなウェブサイトを構築することが可能になります。

Copy
1animation-range-end: 75%;

引数なし

引数はありません

戻り値なし

戻り値はありません