CSS Animation Generator
Copy-ready keyframes with a live preview.
Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.
CSS Animation Generator
How to use this tool
- Pick an animation, a duration and a timing function. The preview box animates with your settings.
- Press Generate for the keyframes and the class CSS.
- Copy the code into your stylesheet and add the class to any element.
Worked example
Fade in at 1 second with ease produces '@keyframes fade { from { opacity: 0; } to { opacity: 1; } }' and the class '.anim-fade { animation: fade 1s ease; }'. Slide up moves the element from 20px below its position to its natural spot.
What this tool does not do / Limits
Five simple animations only: no chained animations, delays, iteration counts or custom keyframe percentages are offered, and the preview uses a fixed teal box that does not match your site's own styling.
Frequently asked questions
Will the animation run once or loop?
The generated class runs once, as written. Add 'infinite' after the timing value in your own CSS if you want it to loop.
Does this work in all browsers?
These keyframes use standard CSS with no vendor prefixes, which current browsers support. Very old browsers may need prefixes, which this tool does not add.
Related tools
JSON Studio
Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.
LiveRegex Tester
Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.
LiveSecurity Header and DNS Checker
Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).
Live