Your files stay on your device

# CSS animation generator

Build a CSS keyframe animation from a step timeline with easing controls, and get a reduced-motion fallback in the output.

Add a keyframe row to compile the sheet.

The timeline only speaks compositor-friendly properties: opacity, transform (translate, scale, rotate) and color. Animating those keeps frames cheap on the GPU; layout properties like width or top are left out on purpose, because animating them reflows the page on every frame. The preview mounts the generated sheet as written, including the prefers-reduced-motion block, so what you see is what ships. Drop the copied CSS on any element by adding the animated class, or rename .animated to your own selector after pasting.
Options

## More regex & cron tools

- [CSS gradient builder](/color/gradient)
- [Color converter & contrast](/color/converter)
[All regex & cron tools](/dev)

Was this tool useful?
YesNo

---

Canonical HTML: https://nutter.tools/dev/css-animation-generator
Markdown version: https://nutter.tools/dev/css-animation-generator.md
Plain-text version: https://nutter.tools/dev/css-animation-generator.txt
Agent index: https://nutter.tools/llms.txt