A collection of ready-to-use CSS animations. Click on any animation to customize and copy the code.
Smooth entrance animation.
Enters from top with fade.
Slides in from the left with a fade.
Slides in from the right with a fade.
Scales up from small to full size with a fade.
Rolls in from the left while rotating.
3D flip entrance along the X axis.
Slides in from below into position.
A fun bouncing effect useful for drawing attention.
A subtle heartbeat effect.
Wiggle effect often used for errors or invalid input.
An expanding ring effect for status indicators.
A playful wobble attention seeker.
A fast-paced pumping animation.
A celebratory wiggle-and-shake reveal.
Stretches and snaps back like a rubber band.
Repeated fade in/out flash for warnings.
A squishy jelly-like wobble.
Neon glowing effect.
A gentle hovering motion.
A swinging pendulum effect.
Animated gradient background that flows continuously.
Reveals text one character at a time with a blinking caret.
A quick scale-up pop, great for icon emphasis.
Continuous 3D rotation around the Y axis.
A continuous rotation, great for loading indicators.
Three bouncing dots, classic typing/loading indicator.
Two-ring spinner with smooth rotation.
Equalizer-style bars rising and falling.
Loading placeholder with a shimmering gradient.
Indeterminate progress bar that loops smoothly.
Fades out while sliding down.
Scales down and fades away.
Slides off the screen to the right.