CSS - timeline-trigger-active-range-*

概要

説明

スクロールトリガーアニメーション のアクティブ範囲を指定します。この範囲から対象要素が出て行ったときに、animation-trigger で指定したアクティブアクションが実行されます。2026年3月の Chrome 146 でサポートされました。

normal

通常動作となります。開始側は cover 0%、終了側は cover 100% と同義となるようです。

<length-percentage>

長さやパーセンテージのみを指定した場合は、cover <length-percentage> と同義となるようです。

<timeline-range-name> <length-percentage>

範囲名と長さやパーセンテージを指定した場合は、次の意味を持ちます。

• cover n% : 要素がビューポートと交差している間。具体的には、アクティブ領域から要素の下部 n% が出たとき。
• contain n% : 要素がビューポートに完全に納まっている間。具体的には、アクティブ領域から要素の上部 n% が出たとき。
• entry n% : 要素がビューポートに入ろうとしている間。具体的な挙動はちょっと理解できていません...。
• exit n% : 要素がビューポートから出ようとしている間。具体的な挙動はちょっと理解できていません...。
• entry-crossing n% : entry は入っているとき、entry-crossing は入り始めたとき(境界線を横切ったとき)の差異があるようですが、違いはよくわかりませんでした。
• exit-crossing n% : exit は出ているとき、exit-crossing は出始めたとき(境界線を横切ったとき)の差異があるようですが、違いはよくわかりませんでした。

関連項目

• timeline-trigger
• timeline-trigger-name
• timeline-trigger-source
• timeline-trigger-activation-range
• timeline-trigger-activation-range-start
• timeline-trigger-activation-range-end
• timeline-trigger-active-range
• animation-trigger
• trigger-scope

リンク

• https://drafts.csswg.org/animation-triggers-1/?utm_source=chatgpt.com#timeline-trigger-active-range-prop