CSS keyframes generator

About this tool

CSS animations run on a timeline defined by @keyframes. Each stop sets transform and opacity at a percentage. The animation shorthand wires name, duration, easing, delay, iteration count, direction, and fill mode.

Always respect prefers-reduced-motion for users who disable motion in their OS settings.

Transforms compose in the order translate, scale, then rotate at each stop — reordering in hand-written CSS changes the arc. Use animation-fill-mode: forwards when the element should stay on its last keyframe (common for entrance animations). Infinite loops are fine for loaders; avoid them on large hero text. Assign the generated .animated class or rename it to match your BEM convention.