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

animation-rangeプロパティは、CSSにおけるスクロール連動アニメーションの進行範囲を定義するために使用されるショートハンドプロパティです。このプロパティを使用することで、ウェブページをスクロールした際に、要素が特定のスクロールコンテナ内やビューポートに対してどの位置にあるときにアニメーションを開始し、どの位置で終了するかを柔軟に制御できるようになります。

具体的には、animation-rangeプロパティは、animation-range-startとanimation-range-endという二つの個別プロパティの値をまとめて設定します。animation-range-startはアニメーションが始まるスクロール位置を定義し、animation-range-endはアニメーションが完了するスクロール位置を指定します。これらのプロパティに、entry、exit、coverなどのキーワードや、長さ、パーセンテージといった値を組み合わせて設定することで、スクロールの進行度合いと要素の表示状態に基づいてアニメーションを制御することが可能になります。

たとえば、要素が画面に初めて表示され始めたときにアニメーションを開始し、画面の中央に到達したときにアニメーションが完了するように設定したり、要素が画面を通過する特定の期間だけアニメーションを再生させるといった動作を実装できます。これにより、ユーザーのスクロール操作と同期した、より魅力的でインタラクティブなユーザー体験を持つウェブコンテンツを作成することが可能となり、視覚的なストーリーテリングやコンテンツの強調に役立ちます。

Copy
1.element {
2  animation-range: entry 0% exit 100%;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません