CSS keyframes generator
Add keyframe stops, tune animation settings, preview the motion, and copy the full CSS block.
~~~
Presets
Keyframe stops
Animation settings
Preview
~~~
Output
Animation settings are saved in the URL. Assign class animated to any element.
~~~
About this tool
CSS animations run on a timeline defined by @keyframes. Each stop sets transform and opacity at a percentage. Theanimation 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.
~~~