Generate a CSS animation
Build CSS @keyframes animations visually: add keyframes with transforms and opacity, set timing and easing, preview live and copy the CSS. Free.
- Files never leave your device
- Free, no sign-up
- No watermark
About CSS Animation Generator
Create CSS keyframe animations without writing them by hand. Add keyframes, set translate, scale, rotate and opacity at each step, then choose duration, delay, iteration count, direction, easing and fill mode. The preview plays your animation live, and you can copy the complete @keyframes rule and animation property when you are happy.
How to use CSS Animation Generator
- 1
Name the animation and set duration and easing.
- 2
Add keyframes and set transforms and opacity at each one.
- 3
Watch the live preview.
- 4
Copy the CSS.
Why use this tool
- Visual keyframe editor.
- Translate, scale, rotate and opacity.
- Duration, delay, iterations, direction, easing and fill mode.
- Live preview.
- Copy-ready @keyframes CSS.
Frequently asked questions
For simple transitions and loops, CSS animations are efficient and need no library.
transform and opacity are the smoothest, because browsers can animate them on the GPU.
Wrap the animation in @media (prefers-reduced-motion: no-preference) so users who prefer less motion are not affected.
Yes. Set iterations to infinite.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. The CSS Animation Generator gives you plain CSS, so it works in stylesheets, CSS modules, styled-components or inline styles in any framework.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Box Shadow GeneratorDesign CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code.
- Flexbox PlaygroundBuild flexbox layouts visually: direction, wrap, justify, align and gap for the container and items, with live preview and copyable CSS.
- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.
- Border Radius GeneratorDesign rounded corners visually: set each corner separately, link them, choose px, % or rem, preview the shape and copy the CSS.
- Glassmorphism GeneratorCreate frosted glass UI effects with adjustable blur, opacity, saturation and borders, previewed on a vivid background.