Presets and keyframe steps
Each preset is a complete @keyframes body: Fade In moves opacity from 0 to 1, Slide Up moves transform: translateY() from 40px to 0 while fading in, Bounce and Shake use multiple percentage stops instead of just 0% and 100% to describe a repeating motion within a single animation cycle.
Timing controls
Duration and delay are both in seconds. Easing controls the acceleration curve within each cycle: linear moves at a constant rate, while ease-in-out starts and ends slowly with a faster middle, which reads as more natural for UI motion than a linear pace.
Iteration, direction, and fill mode
animation-iteration-count sets how many times the cycle repeats, including infinite for a continuous loop. animation-direction can reverse the cycle or alternate between forward and backward on each repeat. animation-fill-mode decides whether the element keeps the animation’s starting or ending styles outside the time it’s actually playing, which matters most for entrance animations that should hold their final state once finished.
Replaying a one-shot animation
A CSS animation with iteration-count: 1 only plays once and won’t restart just because its properties change. The Replay button remounts the preview element, which is the same trick needed in real code: toggling a class or re-adding the element to force a finished animation to play again.