What is it?
The CSS Animation Generator makes simple web animations without writing keyframes by hand. Pick an effect such as fade, slide, bounce or spin, set its timing, watch the preview, and copy the ready CSS.
Who is it for?
Web designers, Blogger theme editors adding subtle effects, developers prototyping, and students learning CSS animation.
How to use it
- Pick the animation and adjust the settings; tap Replay to see it again.
- Tap Copy CSS.
- Paste the CSS into your stylesheet and add class="animated" to your element.
Accessibility
Tip: wrap motion in @media (prefers-reduced-motion: no-preference) { … } for visitors who turn animations off. Some people get dizzy from motion; keep animations short and subtle.
Errors and how to fix them
- Nothing moves: the element doesn’t have the class, or the CSS loaded before the element; check the class name.
- Element jumps back at the end: set Fill mode to forwards.
- Animation plays once only: set Times to infinite for loops.
- Jerky on phones: animate transform and opacity, not width, height or margins.
Questions people ask
- Can I use it on Blogger? Yes: add the CSS to the theme and the class to your element in HTML view.
- Does it slow pages? Simple transform and opacity animations are light.
Open the tool: CSS Animation Generator
Still stuck?
Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.
Questions, or an error not listed here?
Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.