#animation CSS effects

3,824 free, pure-CSS effects match the "animation" tag. Each is copy-ready and needs no library or build step.

Live preview Backgrounds

Ski Slope Tracks

Curved ski tracks carve through fresh powder on a mountain slope.

#animation #gradient #transform

Live preview Backgrounds

City Smog

Yellow-brown city smog hangs heavy over an urban skyline.

#animation #gradient #transform

Live preview Backgrounds

Drifting Smoke

Dark smoky layers drift and curl across an ominous backdrop.

#gradient #animation #border

Live preview Backgrounds

Snow Drift

Snowflakes drift and accumulate into soft curves on the ground.

#animation #gradient #transform

Live preview Backgrounds

Gentle Snowfall

Soft white snowflakes drift down across a winter night sky.

#gradient #animation #border

Live preview Backgrounds

Spacetime Warp

Spacetime itself warps and ripples around an invisible mass.

#animation #gradient #transform

Live preview Backgrounds

Static Noise

TV static noise grain at full intensity.

#animation #gradient

Live preview Backgrounds

Steampunk Brass Gears

Brass steampunk gears meshing in continuous rotation.

#animation #gradient #transform

Live preview Backgrounds

Quantum Superposition

Waveform superposition blending two states simultaneously.

#animation #gradient #filter

Live preview Backgrounds

Synthwave Sun

Synthwave retro sun with horizontal cut lines over grid.

#animation #gradient #transform

Live preview Backgrounds

Terrazzo

Colorful terrazzo chips embedded in pale concrete.

#animation #gradient

Live preview Backgrounds

Toile de Jouy

Classic toile de Jouy pastoral scenes repeat in muted blue on cream.

#animation #gradient

Live preview Backgrounds

Toile de Jouy

French provincial toile with monochrome pastoral scenes.

#animation #gradient

Live preview Backgrounds

Traffic Lights

Traffic lights cycle through red yellow and green.

#animation #gradient #transform

Live preview Backgrounds

Triangle Wave

Triangle wave folding symmetric peaks across the panel.

#animation #gradient #shadow

Live preview Backgrounds

Trophy Shine

A golden trophy spins with a sparkle highlight.

#animation #gradient #transform

Live preview Backgrounds

Tunnel Vortex

Concentric tunnel rings pulling viewer into infinity.

#animation #gradient

Live preview Backgrounds

Twilight Blue

Deep twilight blue deepens toward night with early star pricks.

#animation #gradient

Live preview Backgrounds

Vernal Equinox

Balanced light and dark halves mark the spring equinox boundary.

#animation #gradient #transform

Live preview Backgrounds

Violin String Vibration

Bowed violin strings vibrate with a warm amber resonance.

#animation #gradient #transform

Live preview Backgrounds

Wetland Marsh

Calm marsh water reflects reeds and a soft overcast sky.

#animation #gradient #transform

Live preview Backgrounds

White Dwarf

A dense white dwarf star glows intensely in the dark of space.

#animation #gradient #transform

Live preview Backgrounds

Calm Wind

A barely perceptible breeze stirs a pale pastel sky.

#animation #gradient

Live preview Backgrounds

Cyclone

A rotating cyclone spiral of clouds spins over tropical waters.

#animation #gradient #transform

Live preview Backgrounds

Winter Glow

A soft warm winter glow lights snow against a cool sky.

#animation #gradient

Live preview Backgrounds

Winter Solstice

The longest night of the winter solstice under a starry sky.

#animation #gradient

Live preview Backgrounds

Moroccan Zellige

Vivid Moroccan zellige mosaic tiles in star pattern.

#animation #gradient #transform

Live preview Buttons

Animated Stripe Button

Diagonal candy stripes that scroll continuously across the button.

#gradient #animation #hover

Live preview Buttons

Arc Welder Button

Industrial button with an electric arc tracing its top edge.

#hover #animation #transform

Live preview Buttons

Beetle Shell

Iridescent beetle shell in green-purple.

#animation #gradient #shadow

Live preview Buttons

3D Bounce Button

Candy button that bounces with a 3D spring on hover.

#hover #animation #transform

Live preview Buttons

Champagne Bubbles

Pale champagne with rising bubble streams.

#animation #gradient #shadow

Live preview Buttons

Clock Spin Button

Circular button with a clock-hand spinner on hover.

#hover #animation #transform

Live preview Buttons

Jelly Wobble Button

Translucent jelly button that wobbles like gelatin on hover.

#hover #animation #transform

Live preview Buttons

Magenta Hot Pulse

Vivid magenta button with a throbbing pulse.

#hover #animation #transform

Live preview Buttons

Spectral Veil

Ghostly translucent button with rainbow edge.

#animation #gradient #transform

Live preview Buttons

Trailblazer

Bright orange trailblaze with motion lines.

#animation #gradient #transform

Live preview Buttons

Trefoil Knot

Three-leaf trefoil with rotating border.

#animation #gradient #transform

Live preview Buttons

Vortex Pull

Spinning vortex spiral in deep blue.

#animation #gradient #transform

Live preview Buttons

Wobble Button

Purple outline button that wobbles playfully once when hovered.

#animation #hover #3d

Live preview Cards

Aurora Gradient Card

Card with an animated aurora gradient that drifts across the background.

#gradient #animation #shadow

Live preview Cards

Collectible Coin Card

Collectible coin card with a 3D embossed disc, denomination, and year.

#animation #gradient #transform

Live preview Cards

Hologram Projection

Floating translucent hologram card with scan lines and a pulsing blue glow.

#gradient #animation #glass

Live preview Cards

Promotion Card

Promotion card with an upward arrow, trophy, and gold confetti accents.

#animation #gradient #shadow

Live preview Cards

Snow Weather Card

Snowy weather card with drifting snowflakes over a frosty pale-blue field.

#animation #gradient #transform

Live preview Checkboxes

Acai Toggle

An acai spins purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Alarm Clock Toggle

An alarm clock shakes red when checked.

#animation #transform #shadow

Live preview Checkboxes

Ambulance Toggle

An ambulance pulses red when checked.

#animation #transform #shadow

Live preview Checkboxes

Ant March Toggle

An ant wiggles with a dark glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Aurora Glow Toggle

A box that glows with shifting aurora gradients when checked.

#animation #gradient #transform

Live preview Checkboxes

Balloon Float Toggle

A balloon floats with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Baseball Toggle

A baseball bounces white on check.

#animation #transform #shadow

Live preview Checkboxes

Bat Fly Toggle

A bat flutters with a dark glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Bounce Pop Checkbox

The whole control squashes and springs back the moment the state changes.

#animation #transform #border

Live preview Checkboxes

Cosmic Ray Beam

A high-energy cosmic ray beam shoots through the box when checked.

#animation #gradient #transform

Live preview Checkboxes

Falcon Toggle

A falcon shakes brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Long Drum Toggle

A long drum shakes in orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Motorcycle Toggle

A motorcycle bounces in with cool glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Scanline Checkbox

A bright scan line sweeps down the box and leaves solid colour behind it.

#animation #clip-path #gradient

Live preview Checkboxes

Scissors Cut Toggle

Scissors snip with a gray glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Sun Brighten Toggle

A dim sun emoji brightens and slowly rotates with a warm yellow glow when checked.

#animation #shadow #transform

Live preview Checkboxes

Storm Crash Toggle

A thunderstorm shakes yellow when checked.

#animation #transform #shadow

Live preview Forms

Fire Border Input

Animated fire-effect border using layered gradients.

#animation #gradient #border

Live preview Forms

Rainbow Border Input

Border continuously cycles through rainbow hues.

#animation #gradient #border

Live preview Forms

Color Shift Floating Label

Label transitions through multiple hues when input is active.

#animation #transform #border

Live preview Forms

Animating Icon Input

Input whose left icon bounces when input is focused.

#animation #transform #shadow

Live preview Forms

Color Changing Icon Input

Input whose icon cycles through colors on focus.

#animation #transform #shadow

Live preview Forms

Property Focus Ring

Focusing the field animates a registered angle so the gradient ring circles it once.

#animation #gradient #at-property

Live preview Forms

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Live preview Forms

Ripple Radio

Radio with ripple effect emanating from center on selection.

#animation #transform #border

Live preview Forms

Shake Radio

Radio options shake briefly when selected for tactile feedback.

#animation #transform #border

Live preview Forms

Success State Input

Input showing success state with green border and checkmark icon.

#animation #transform #shadow

Live preview Hover

Bob Buoy

Buoy bobbing on water on hover.

#hover #animation #transform

Live preview Hover

Border Dash March

Dashed border marches around on hover.

#hover #animation #border

Live preview Hover

Border Glow Trace

Glowing dot traces around border on hover.

#hover #animation #gradient

Live preview Hover

Border Rainbow Flow

Rainbow border flows on hover.

#hover #animation #gradient

Live preview Hover

Color Shift BG

Background hue rotates continuously on hover.

#hover #animation #gradient

Live preview Hover

Split RGB

RGB color channels split on hover.

#hover #animation #transform

Live preview Hover

Confetti Cannon

Confetti cannon blast on hover.

#hover #animation #transform

Live preview Hover

Confetti Fall

Confetti falls on hover.

#hover #animation #transform

Live preview Hover

Cyber Glitch

Cyberpunk RGB-split glitch with rapid clip-path jumps on hover.

#animation #hover #border

Live preview Hover

Dip Bounce

Dip down then bounce up on hover.

#hover #animation #transform

Live preview Hover

Dust Swirl

Dust swirls around on hover.

#hover #animation #gradient

Live preview Hover

Flame Top Edge

Top edge ignites with animated flame gradient on hover.

#hover #animation #gradient

Live preview Hover

Embers Float

Floating embers drift up on hover.

#hover #animation #transform

Live preview Hover

Embers Glow

Glowing embers rise on hover.

#hover #animation #shadow

Live preview Hover

Fire Flicker

Flickering firelight on hover.

#hover #animation #shadow

Live preview Hover

Fire Spark

Fire sparks flicker on hover.

#hover #animation #gradient

Live preview Hover

Fireflies Glow

Fireflies blink and float on hover.

#hover #animation #transform

Live preview Hover

Fireflies Wander

Fireflies wander randomly on hover.

#hover #animation #transform

Live preview Hover

Firelight Glow

Warm firelight ember glow on hover.

#hover #animation #shadow

Live preview Hover

Flip 3D Coin

Coin-toss flip on hover.

#hover #animation #gradient

Live preview Hover

Aurora Edge Frame

Aurora-like gradient drifts along the edge on hover.

#hover #animation #gradient

Live preview Hover

Fast Corner Trace

Single corner accent traces all four corners quickly on hover.

#hover #animation #transform

Live preview Hover

Glitch Corner Frame

Corners glitch and shift on hover.

#hover #animation #transform

Live preview Hover

Laser Zap Frame

Laser beam zaps around the perimeter on hover.

#hover #animation #transform

Popular tags