demo · v146

Trigger state machine

Scroll-triggered animations have four behaviours: once, repeat, state, and alternate. The state machine here visualises which trigger you're seeing, the entry/exit thresholds, and how each variant reacts when the target leaves the cover range and comes back.

Behind a flag: the animation-trigger family ships behind chrome://flags/#enable-experimental-web-platform-features in Chrome 146. The simulator drives the keyframe animation manually so the comparison works without the flag.

Scroll inside the panel. Watch the badge: it changes between idle, play, play-reverse and idle depending on the trigger type.

trigger

trigger: once · animation state: idle · target in trigger range: no
scroll down ↓
enter range
animated target
exit range
↓
↓

events

.target {
  animation: slide 1s linear;
  animation-trigger: view();        /* trigger family */
  animation-trigger-type: once;     /* | repeat | state | alternate */
  animation-trigger-range: contain 0% contain 100%;
}

see also