Animation Playground
Learn Animation by Playing
No typing code. Just drag sliders, pick options, and watch what happens. When you're ready, copy the generated HTML & CSS.
Transition Builder
Hover over the box to trigger the transition. Adjust the controls to change how it animates.
Hover the box!
Transform Explorer
Drag the sliders to transform the box in real time. Combine multiple transforms at once!
Drag sliders to transform
@keyframes Builder
Pick an animation type, adjust its settings, then hit Play. The HTML & CSS are generated for you.
Hit Play to see the animation
Animation Combiner
Stack multiple effects together. Toggle each one on/off and see how they combine.
Toggle effects on/off
Text Animations
Animate text with fades, slides, glows, gradients, and more. Hit Play to preview.
Hit Play to animate the text
Loading Animations
Build spinners, dot loaders, progress bars, and other loading indicators with pure CSS.
Loading animation preview
Button Hover Effects
Pick a hover effect for a button. Hover over the preview button to see it in action.
Hover the button!
3D Card Flip
A two-sided card that flips with CSS 3D transforms. Click the card or use controls to flip.
Click the card or button to flip
Parallax Mouse Effect
Move your mouse over the scene. Each layer moves at a different speed for a depth effect.
Move your mouse over the scene
Stagger Animations
Animate a row of items with staggered delays — each item starts slightly after the previous one.
Hit Play to see the stagger
Scroll-Triggered Animations
Items animate in as they scroll into view. Scroll inside the demo box to see the effect.
Scroll inside the box below
Typewriter Effect
Classic typewriter animation using pure CSS — text types out one character at a time with a blinking cursor.
Hit Play to start typing