CSS - animation-trigger

none: なにもしない。
play: アニメーションを再生する。
play-once: アニメーションを1度だけ再生する。
play-forwards: アニメーションを正方向に再生する。
play-backwards: アニメーションを逆方向に再生する。
pause: アニメーションを停止する。
reset: アニメーションをリセットする。
replay: アニメーションを再度再生する。

概要

属性名	animation-trigger
値	[ none \| [ <trigger-name> <activation-action> <active-action>... ]+ ]#
初期値	none
適用可能要素	すべての要素
継承	継承しない
サポート	https://caniuse.com/?search=animation-trigger

スクロールトリガーアニメーションでトリガー名とアニメーションを連結し、アクティベーション領域に入ってきたとき、アクティブ領域から出る時のアクションを指定します。2026年3月の Chrome 146 でサポートされました。

アクションには下記があります。

初版：2026年3月15日、最終更新：2026年3月15日

https://www.tohoho-web.com/css/prop/animation-trigger.htm