Free CSS Animation Generator
Create CSS keyframe animations with a visual builder. 39 animation types, trigger controls, and ready-to-use CSS output.
How to Use CSS Animation Generator?
Choose Animation
Pick from 39 animation types including classics like Bounce and Fade, modern effects like Glitch and Typewriter, plus Scale, Flip, Swing, Slide, and Shadow animations.
Set Trigger & Timing
Choose when the animation triggers (on load, hover, or click). Adjust duration, delay, timing function, iterations, and direction.
Copy Code
Copy the generated CSS code and HTML to use directly in your website.
About CSS Animation Generator
Build CSS keyframe animations visually with 39 animation types across four groups — 12 classics (Bounce, Fade In/Out, Slide in 4 directions, Pulse, Rotate, Shake, Flip, Zoom In), 9 modern effects (Glitch, Wiggle/Jello, Float/Levitate, Blur In/Out, Typewriter, Gradient Shift, Reveal/Mask, 3D Card Flip), and 18 advanced animations including Scale Up/Down, Rotate Scale, Rotate 90°, Flip Horizontal, Flip 2, Flip Scale, Flip Scale 2, Swing, Slide, Slide Back/Forward, Slide Rotate, Shadow Drop, Shadow Drop 2, Shadow Pop, and Shadow Inset. Set triggers (On Load, On Hover, On Click/Focus), customize duration, delay, iteration count, and direction, then copy the generated CSS code.
39 Animations, 3 Triggers, CSS Output
Pick from 12 classic animations like Bounce, Fade, Slide, Pulse, Rotate, Shake, Flip, and Zoom, 9 modern effects including Glitch, Wiggle/Jello, Float/Levitate, Blur In/Out, Typewriter, Gradient Shift, Reveal/Mask, and 3D Card Flip, plus 18 advanced animations — Scale Up/Down, Rotate Scale, Rotate 90°, Flip Horizontal, Flip 2, Flip Scale, Flip Scale 2, Swing, Slide, Slide Back/Forward, Slide Rotate, Shadow Drop, Shadow Drop 2, Shadow Pop, and Shadow Inset. Each animates a live preview element in real time.
Control when the animation fires with three trigger modes — On Load for entrance effects, On Hover for interactive feedback, and On Click/Focus for user-initiated motion. Fine-tune duration (0.1-5s), delay (0-3s), iteration count (1, 2, 3, or infinite), and direction (normal or reverse). Copy the full CSS keyframes and selector code.
