CSS Animation Gallery

Element fades from fully transparent to opaque — the most common entrance animation.

Element fades to transparent — good for dismissals and exit states.

Fades in while moving up slightly — common for card lists.

Fades in while dropping from above — suits dropdowns and toasts.

Slides in from the left while fading — suits sidebars and drawers.

Slides in from the right while fading — suits notifications and panels.

Fades in while growing from 92% — more punch than a plain fade.

Fades in as a slight blur clears — good for layer changes.

Opacity and contrast settle together, like a film dissolve.

Moves up into place from below with a larger travel distance.

Slides down into place — good for expanding menus.

Slides left from the right — common in carousels.

Slides right from the left side.

A springy slide-in with overshoot for a livelier feel.

Slides in with directional blur, mimicking motion streaks.

New content pushes up over the old — common in step transitions.

Reveals left-to-right with clip-path, like a curtain opening.

Reveals upward from the bottom — suits images and headings.

Scales up from small to normal — suits modals and popovers.

Scales down while fading — used when closing dialogs.

Quick scale with a slight overshoot for a popping feel.

Repeatedly scales up and down to hint interactivity.

Two uneven beats mimic a heartbeat.

Scales up from the centre with a springy feel.

Squashes horizontally then springs back — good button feedback.

A slow scale loop that keeps static elements alive.

Continuous linear rotation — perfect for loaders.

Rotates a full turn once, then stops.

Small left-right rotation, often used to emphasise icons.

Swings like a pendulum around the top edge.

Steady slow rotation — good for loaders and decorative rings.

Rotates from -180° to 0° while fading in, like a stamp landing.

Swings down around the top-left corner like a hinge.

Flips 180° around the Y axis — for front/back cards.

The classic vertical bounce for hint arrows.

A gentler, smaller bounce.

Horizontal squash and stretch, like jelly.

Vertical stretch then snap back.

Multi-step scale with overshoot for a bouncier landing.

Crouches to load then jumps, with a slight stretch.

Falls in from above and bounces twice, mimicking gravity.

Rapid horizontal shake — common for validation errors.

Rapid vertical shake.

Repeated opacity toggling for strong emphasis.

A celebration-style combo of scale and rotation.

An expanding box-shadow ring creates a pulse halo.

Quick small left-right head shake — a 'wrong' feedback cue.

High-frequency horizontal buzz — good for errors and alerts.

Alternating horizontal and vertical stretch, like a rubber band.

Flips 180° around the horizontal axis; add perspective for depth.

Flips around the vertical axis — great for card faces.

Flips in from the back face while fading.

Flips in from the side.

Flips in along the X axis with perspective depth.

Rolls over an edge like a cube turning to its next face.

Flips out along the Y axis while fading — an exit animation.

Lifts up with a deeper shadow on hover — the go-to cue for cards and buttons.

Scales up slightly on hover — good for icons, avatars and thumbnails.

Shrinks a touch on hover for a focused, pressed-in feel.

Rotates on hover for a playful, hand-made feel.

A halo lights up on hover — emphasises clickable actions.

A diagonal highlight sweeps across — a staple for buttons and cards.

Flips half a turn on the Y axis — good for front/back info swaps.

Pushes toward the viewer on Z with a slight pitch — a 3D pop.

Only the inner icon pops and rotates on hover — clearer layering.

Shrinks while held and springs back on release — the most tactile cue.

Widens and flattens while held, as if pressed by a finger.

Springs back with a short kick so the click clearly registered.

A ripple ring expands on press — the core Material-style feedback.

A double ring appears on press — for actions needing clear confirmation.

A quick horizontal shake on press — for disallowed or invalid actions.

Grows on hover, shrinks on press — full button feel from one class.

Rises on hover and drops on press, mimicking real key travel.

A thick bottom edge makes a 3D key that flattens when pressed.

The glow keeps breathing after hover, pulling focus to the primary action.

The gradient slides sideways on hover for a fluid colour shift.

A border scales out from the centre on hover — for secondary CTAs.

The inner arrow nudges right on hover — a clear 'go on' hint.

A white ripple spreads from the centre on press — striking on dark buttons.

A highlight sweeps diagonally across on hover — common on commerce pages.

Reveals text by animating width — pairs well with monospace fonts.

Blinking caret to pair with the typewriter effect.

A gradient highlight sweeps across — used for skeleton loaders.

Slow vertical drift for a weightless feel.

From blurred to sharp — nice for images and headings.

Pulsing drop shadow for a glowing effect.

Background gradient position drifts for a flowing look.

Expands outward from the centre while fading — a water ripple.

Border radius morphs between a square and a circle.

A highlight sweeps left to right — the classic skeleton loader.

Gradient text with a moving highlight — great for headings.

Irregular brightness jumps that mimic an old neon tube.

Rises while the shadow grows, creating lift-off.

Rotates hue through the full wheel so any colour slowly shifts.

Wipes away right-to-left with clip-path — a nice exit.

Corners cycle between sharp and beveled for a techy frame.

A looping nudge up and down — hints that there's more below.