CSS - timeline-trigger

概要

属性名timeline-trigger
値none | [ <trigger-name>
         <trigger-source>
         <trigger-activation-range>
     [ / <trigger-active-range> ]? ]#
初期値個々のプロパティに従う
適用可能要素個々のプロパティに従う
継承個々のプロパティに従う
サポートhttps://caniuse.com/?search=timeline-trigger

説明

スクロールトリガーアニメーション でトリガー名、アクティベーション範囲、アクティブ範囲を指定します。2026年3月の Chrome 146 でサポートされました。下記のプロパティのショートハンドです。

<trigger-name>
-- で始まるトリガー名を指定します。
<trigger-source>
トリガーソースを指定します。view() は画面に表示されている範囲(ビューポート)、scroll() は見えていない領域を含めたスクロール全体を示します。
<trigger-activation-range>
アクティベーション領域を指定します。対象要素がこの領域に入ってくるときに animation-trigger で指定したアクティベーションアクションが実行されます。
<trigger-active-range>
アクティブ領域を指定します。対象要素がこの領域から出ていくときに animation-trigger で指定したアクティブアクションが実行されます。

関連項目

リンク

Copyright (C) 2026 杜甫々
初版：2026年3月15日、最終更新：2026年3月15日
https://www.tohoho-web.com/css/prop/timeline-trigger.htm