v151 · css · animation
Trigger Playground
The CSS animation-trigger property defines how an animation responds to being triggered. With the play action, re-triggering after the animation finishes does NOT rewind — the element stays at its final state. Click "play" below, wait for it to finish, then click again.
Click "play" to start. Click again after it finishes — it should NOT restart (the play trigger does not rewind).
The animation-trigger property
/* Define a named timeline trigger, then associate it with the animation. */
.trigger-source {
timeline-trigger: --travel view() 20% 80%;
}
.element {
animation: travel 2s forwards;
animation-trigger: --travel play;
}
/* other trigger actions: */
/* play-forwards — always plays forward */
/* play-backwards — plays in reverse */