v151 · css · animation
Play vs Replay (AnimationTrigger)
The CSS animation-trigger property adds play, play-forwards, and play-backwards trigger actions. When using play, re-triggering an already-finished animation does NOT rewind — it stays at the end. The old behavior always rewound to the beginning.
Old behavior: auto-rewind
Animation always restarts from the beginning.
New behavior: play (no rewind)
If already finished, stays at end.
The CSS animation-trigger API
Chrome 151 changes the behavior of the existing trigger actions. When play is invoked for an animation already finished in that direction, it no longer rewinds and restarts. The current CSS syntax defines a named trigger separately, then associates that name with the animation:
.trigger-source {
timeline-trigger: --travel view() 20% 80%;
}
.element {
animation: slide 2s forwards;
animation-trigger: --travel play;
}