CSS Animation Generator
Generate CSS keyframe animation code from eight presets — fade, slide, bounce, rotate, scale, shake, pulse and flip — with a live preview and one-click copy.
FreeOnline Tool
Loading…
How to Use
Pick an animation type and set the duration and iteration count; the square in the preview area plays the animation automatically.
Animation types: fade, slide, bounce, rotate, scale, shake, pulse and flip — eight options in total.
Settings: adjust the duration (from 0.1 seconds upward), the iteration count (1 to 3 times, or infinite) and the timing function (ease, linear, ease-in, ease-out, ease-in-out).
Every change updates the preview immediately, and the matching CSS @keyframes code is generated below. Click "Copy CSS" to put the code on your clipboard.
Features
- Eight animation types: fade, slide, bounce, rotate, scale, shake, pulse and flip
- Adjustable settings: combine duration, iteration count and timing function freely
- Live preview: see the effect the moment you change a setting
- Code generation: standard CSS @keyframes code is produced automatically
- One-click copy: copy the generated CSS to the clipboard with a single button
Use Cases
Web development
Front-end developers can produce CSS keyframe code quickly instead of writing it by hand.
Prototyping
Designers can try out different animation effects while a prototype is still taking shape.
Learning CSS
Beginners can see what each animation property actually does through the live preview.
Presentation pages
Add simple CSS animations to a presentation page to make it more engaging.
FAQ
Which browsers does the generated CSS work in?
The output uses the standard @keyframes rule and animation property, which every modern browser supports, including Chrome, Firefox, Safari and Edge.
Can I build more complex animations?
The tool offers eight common animation presets. For richer, combined animations, use the generated code as a starting point and edit the keyframes inside @keyframes by hand.
Is there a maximum duration?
The duration starts at 0.1 seconds and has no fixed upper limit, though keeping animations between 0.3s and 3s usually looks best.
How do I apply the animation to my own element?
Add the generated @keyframes code to your stylesheet, then set the animation property on the target element. The example code at the bottom of the page shows exactly how.