The animation-trigger property determines whether an animation is triggered, and what trigger it responds to. It is a reset-only sub-property of the animation shorthand..card {
animation-trigger: once;
}.reveal {
animation: fade-in 1s ease;
animation-trigger: state;
}noneThe default value. No trigger — animation starts immediately.onceTrigger fires once.repeatTrigger fires every time the condition is met.alternateTrigger alternates direction on each fire.stateState-dependent trigger — animation runs while condition holds.playPlays the animation forward on each trigger activation.play-oncePlays the animation forward exactly once.play-forwardsPlays the animation forwards and holds at the end.play-backwardsPlays the animation backwards and holds at the start.pausePauses the animation while the trigger is active.resetResets the animation to its starting point.replayResets and replays the animation from the beginning.CSS Animations Level 2Editor's DraftW3CEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcespreviousnext
