demo · v144
Once vs Repeat
animation-trigger takes a behaviour: once fires the keyframes the first time an element enters its trigger range and never again. repeat plays every time it crosses. The right choice depends on whether you want a one-shot reveal or a state-machine you can scrub.
animation-trigger: checking…
once — reveal pattern
scroll ↓
block 1
block 2
block 3
block 4
scroll back up to verify they DON'T re-fire
fires this session: 0
repeat — state pattern
scroll ↓ then ↑ repeatedly
block 1
block 2
block 3
block 4
re-enter to retrigger
fires this session: 0
Use
once for landing-page reveals. Use repeat when the animation expresses state (heart-rate visualiser, scroll-driven counter).the API
/* one-shot reveal */
.reveal {
animation: pulse 600ms;
animation-trigger: once scroll-enter 80%;
}
/* state machine, re-fires every crossing */
.state {
animation: flash 600ms;
animation-trigger: repeat scroll-enter 80%;
}