CSS Animation Generator

CSS @keyframes lets you define the intermediate steps of an animation sequence. You specify CSS properties at different percentage points (0% = start, 100% = end) and the browser smoothly interpolates between them. The animation is then applied to an element using the animation property.

CSS transitions animate a property when it changes from one value to another (typically triggered by a state change like :hover). CSS animations use @keyframes and can run automatically, loop, alternate directions, and involve multiple steps — making them more powerful for complex or continuous effects.

fill-mode controls what happens before and after an animation plays. "forwards" keeps the final keyframe state after the animation ends. "backwards" applies the first keyframe state during the delay. "both" applies both behaviours. "none" (default) reverts to the original style before and after.

The timing function controls the speed curve of the animation — how fast or slow it moves through its keyframes at different points. Common values: ease (slow-fast-slow), linear (constant speed), ease-in (starts slow), ease-out (ends slow), and cubic-bezier() for custom curves.