CSS - timeline-trigger-activation-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% : 要素がビューポートに入ろうとしている間。具体的には、スクロール領域の下部に要素の上部 n% が入ったとき。
• exit n% : 要素がビューポートから出ようとしている間。具体的には、スクロール領域の上部から要素の上部 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-active-range
• timeline-trigger-active-range-start
• timeline-trigger-active-range-end
• animation-trigger
• trigger-scope

リンク

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