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

animation-range-startプロパティは、CSSのアニメーションが開始されるスクロール範囲の開始点を定義するプロパティです。このプロパティは、Webページのスクロール動作に連動してアニメーションを再生したい場合に特に重要となります。具体的には、要素がビューポートに入ってくるタイミングや、特定のスクロール位置に達したタイミングでアニメーションを開始するといった、時間軸ではなくスクロール位置をトリガーとしたアニメーションの制御に利用されます。

このプロパティは、scroll-timelineプロパティと組み合わせて使用されることが一般的です。設定できる値には、キーワード、長さ、およびパーセンテージがあります。例えば、normalやcoverといったキーワードは、スクロールコンテナと要素の関係に基づいてアニメーションの開始位置を自動的に決定します。また、entryやexitといったキーワードとパーセンテージを組み合わせることで、要素がビューポートにどれだけ表示されたか、またはビューポートからどれだけ離れたかという具体的な位置に基づいて、アニメーションの開始点を詳細に指定できます。例えば、entry 0%は要素がビューポートに入り始めた瞬間にアニメーションを開始し、exit 100%は要素がビューポートから完全に離れた瞬間にアニメーションを開始することを意味します。

animation-range-startは、animation-range-endプロパティと合わせて使用することで、アニメーションが再生されるスクロール範囲全体を定義します。これにより、開発者はスクロールに応じたアニメーションの挙動をきめ細かく制御し、ユーザーがコンテンツを閲覧する体験をよりダイナミックで魅力的なものにすることができます。このプロパティを理解し活用することで、Webサイトにインタラクティブな要素を効果的に組み込むことが可能になります。

Copy
1animation-range-start: normal;

引数なし

引数はありません

戻り値なし

戻り値はありません