CSS keyframes animation generator
Build a CSS @keyframes animation on a timeline, preview it live and export CSS, a Tailwind v4 animate token or Motion variants. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
Build an animation on a step timeline, or start from an entrance, attention or exit preset such as fade-up or shake. Duration, delay, repeat, direction, fill mode and an easing curve are controls, and the preview replays on demand.
The exported CSS includes a prefers-reduced-motion variant. You can also export a Tailwind v4 animate token with its keyframes, or Motion variants for a React component.
How to use it
- Choose a preset or add steps to the timeline.
- Set duration, delay, easing and fill mode.
- Replay the preview until it feels right.
- Copy the @keyframes CSS, the Tailwind token or the Motion variants.
This generator is also a component of the kit: Generator Keyframes, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.