#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 Loaders

Lava Lamp

Orange blobs rising and morphing inside a warm yellow lava lamp.

#gradient #animation #shadow

Live preview Loaders

LCD Display

LCD display with pixel shifting.

#animation

Live preview Loaders

Leaf Fall

Autumn leaves drifting down with a swaying motion.

#animation #gradient #transform

Live preview Loaders

Line Connect Node

Lines drawing between two nodes.

#animation #gradient #transform

Live preview Loaders

Long Jump Leap

Long jumper arcing through sand.

#animation #gradient

Live preview Loaders

Magician Hat

Magician pulling rabbit from hat.

#animation #gradient #transform

Live preview Loaders

Mandala Spin

Symmetric mandala pattern spinning.

#animation #transform

Live preview Loaders

Match Strike

Match striking and igniting.

#animation #gradient #transform

Live preview Loaders

Merry-Go-Round

Rotating platform with three colored horses spinning around.

#animation #gradient #transform

Live preview Loaders

Metronome Tick

Metronome pendulum ticking.

#animation #gradient #transform

Live preview Loaders

New Year Ball Drop

New Year's Eve ball descending.

#animation #gradient #shadow

Live preview Loaders

Pan Flute

Pan flute pipes of varying lengths.

#animation #gradient #shadow

Live preview Loaders

Pearl Glow

Pearl with soft iridescent glow.

#animation #gradient #transform

Live preview Loaders

Pentagon Flower Spin

Five-petal flower spinning.

#animation #transform

Live preview Loaders

Pillar Column

Classical column with capital.

#animation #gradient #filter

Live preview Loaders

Pole Vault

Pole vaulter going over bar.

#animation #gradient #transform

Live preview Loaders

Heptagon Rotate

Seven-sided polygon rotating.

#animation #gradient #transform

Live preview Loaders

Pretzel Twist

Pretzel with twisting arms.

#animation #transform #border

Live preview Loaders

Prevailing Wind

Prevailing wind direction arrows.

#animation #border

Live preview Loaders

Puddle Ripple

Ripples expanding outward in a puddle from a drop.

#animation #transform #border

Live preview Loaders

Rolling Pin

Rolling pin spinning back and forth over dough.

#animation #gradient #transform

Live preview Loaders

Santa Sleigh Fly

Santa's sleigh flying across.

#animation #gradient #transform

Live preview Loaders

Saxophone

Saxophone with keys pressing along its curved body.

#animation #gradient #transform

Live preview Loaders

Scroll Unfurl

Ancient scroll unfurling.

#animation #gradient #transform

Live preview Loaders

Sextant

Sextant arc with swinging arm.

#animation #transform #border

Live preview Loaders

Shape Explode Reform

Shape exploding outward and reforming.

#animation #transform

Live preview Loaders

Spacetime Warp

Spacetime grid warping under gravity.

#animation #gradient #shadow

Live preview Loaders

Spinning Top

A diamond-shaped top spinning fast while wobbling off-axis.

#gradient #animation #transform

Live preview Loaders

Spotlight Spin

Spotlight spinning in full circle.

#animation #gradient #transform

Live preview Loaders

Steel Drum

Steel drum with concave surface.

#animation #gradient #transform

Live preview Loaders

Stepper Motor

Stepper motor stepping in increments.

#animation #gradient #transform

Live preview Loaders

Tape Measure

Tape measure extending and retracting its yellow ribbon.

#animation #gradient #border

Live preview Loaders

Tempest

Violent tempest swirling.

#animation #gradient #transform

Live preview Loaders

Tomato Slice

Tomato slice with seed pattern.

#animation #gradient #transform

Live preview Loaders

Totem Rise

Tribal totem rising with eyes glowing.

#animation #gradient #filter

Live preview Loaders

Track Lane

Runner sprinting around an athletics track oval.

#animation #gradient #shadow

Live preview Loaders

Trampoline Bounce

A pink ball bouncing on a cyan trampoline surface that flexes on impact.

#gradient #animation #shadow

Live preview Loaders

Triangle Orbit Dots

Three colored dots orbiting in a triangular path.

#animation #transform

Live preview Loaders

Triangle Stack

Nested triangles rotating opposite.

#animation #transform #border

Live preview Loaders

Trumpet Valves

Trumpet with three piston valves pumping in rhythm.

#animation #gradient

Live preview Loaders

Gas Turbine

Gas turbine with flame inside.

#animation #gradient #transform

Live preview Loaders

Violin Bow

Violin bow drawing across strings back and forth.

#animation #gradient

Live preview Loaders

Vortex Spiral

Four nested purple rings spiraling inward and fading to nothing.

#animation #border #transform

Live preview Loaders

Water Clock

Ancient water clock filling.

#animation #gradient

Live preview Loaders

Whisk Spin

Kitchen whisk spinning to whip up a swirl of mixture.

#animation #transform #border

Live preview Loaders

Wind Gust

Wind gust lines blowing.

#animation #gradient #transform

Live preview Loaders

Wine Pour

Wine pouring into glass.

#animation #gradient #transform

Live preview Loaders

Wormhole

Wormhole tunnel with concentric rings.

#animation #transform #border

Live preview Loaders

Xylophone Mallet

Mallet striking xylophone bars.

#animation #gradient #transform

Live preview Loaders

Ziggurat Tier

Ziggurat with stacked tiers.

#animation #gradient #filter

Live preview Loaders

Zombie Shuffle

Zombie shuffling across screen.

#animation #gradient #transform

Live preview Navigation

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

#hover #animation #border

Live preview Navigation

Push Content Right Drawer Navbar

Right drawer pushes the main content leftward when opening.

#hover #animation #border

Live preview Navigation

Glow Line Navbar

Navbar with neon glowing line under active link.

#hover #animation #shadow

Live preview Navigation

Gradient Flow Navbar

Navbar with an animated gradient background flowing across links.

#hover #animation #gradient

Live preview Navigation

Jello Wiggle Navbar

Links wiggle like jello with a skew-based animation on hover.

#hover #animation #transform

Live preview Navigation

Split Line Gradient Flow Navbar

Nav links separated by animated gradient line dividers.

#hover #animation #gradient

Live preview Navigation

Text Glitch Hover Navbar

Hovered links glitch with a split-color RGB shift effect.

#hover #animation #shadow

Live preview Navigation

Text Glow Pulse Link Navbar

Each link has a pulsing text glow that intensifies on hover.

#hover #animation #shadow

Live preview Navigation

Text Shadow Dance Navbar

Hovered links perform a layered text-shadow dance animation.

#hover #animation #shadow

Live preview Navigation

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

#hover #animation #transform

Live preview Navigation

Wobble Jiggle Navbar

Links wobble-jiggle on hover using a keyframe animation.

#hover #animation #transform

Live preview Progress

Amber Sheen Progress

A polished amber fill with a light sheen that sweeps across it on a loop.

#animation #transform #gradient

Live preview Progress

Anvil Stroke Progress

A piston head runs the bore back and forth while the charge ahead of it is compressed.

#piston #animation #transform

Live preview Progress

Bearing Heat Progress

A thermal band read from a cold to hot ramp with a glowing knob parked at the current reading.

#temperature #animation #gradient

Live preview Progress

Blush Bloom Progress

Six petals ring a pulsing golden heart and the four opened ones report the current share.

#petals #rotate #animation

Live preview Progress

Brass Thread Progress

A hairline track with rounded caps whose warm brass fill breathes between six and eighty four percent.

#animation #gradient #border-radius

Live preview Progress

Flange Vumeter Progress

An analogue volume unit meter whose needle keeps flicking across a scale into the red end.

#vu-meter #animation #conic-gradient

Live preview Progress

Organza Sway Progress

Two sine wave surfaces roll in opposite directions over a liquid level held at fifty five percent.

#sine-wave #svg #animation

Live preview Progress

Pylon Cogwheel Progress

A toothed wheel turns against a smaller counter rotating one while a ring holds the value.

#gear #animation #conic-gradient

Live preview Progress

Socket Squeeze Progress

A compression read out where the packed lane keeps collapsing against the raw lane above it.

#compression #animation #flexbox

Live preview Progress

Tulle Wisp Progress

Seven motes of stardust lift off the filled span and fade away as they rise into the dark.

#stardust #particles #animation

Live preview Progress

Valve Toolchain Progress

Three build stages chained by chevrons, each carrying its own meter and the live one still filling.

#pipeline #stages #animation

Live preview Progress

Violet Kindle Progress

A jagged discharge path where the charged section is stroked bright and keeps sparking unevenly.

#electric #svg #stroke-dasharray

Live preview Sliders

Gleam Zigzag Slider

Saw toothed yellow teeth form the rail while a diagonal gleam wipes across the panel.

#slider #zigzag #sawtooth

Live preview Sliders

Pulse Brutal Slider

Raw brutalist panel with a four pixel ink frame, hard offset shadow and a flashing status tag.

#slider #brutalist #hard-shadow

Live preview Sliders

Pylon Shadow Depth

A standing block casts a shadow that keeps stretching and pulling back over its floor.

#slider #shadow #preview

Live preview Sliders

Shaft Minute Timer

A ticking CSS clock face sits beside a rail that dials the countdown in five minute steps.

#slider #timer #clock

Live preview Sliders

Spiral Mist Slider

Two blurred conic clouds breathe behind the rail and leave a soft aura around the knob.

#slider #blur #aura

Live preview Sliders

Wisp Sparkle Slider

Four point sparkles twinkle out of turn around a violet rail set on a deep night plate.

#slider #sparkle #clip-path

Live preview Tabs

Drift Light Leak Tabs

A warm film light leak drifts across the panel each time a different tab is opened.

#animation #blend-mode #filter

Live preview Tabs

Flux Holographic Tabs

An iridescent foil surface whose rainbow sheen keeps travelling over the chosen tab.

#gradient #animation #transition

Live preview Tabs

Forge Numbered Tabs

Each tab carries a numbered disc that turns white hot when it is opened.

#gradient #animation #border

Live preview Tabs

Monsoon Two Column Panel Tabs

The panel is split in two: a rainfall figure on the left, the reading on the right.

#layout #animation #border

Live preview Tabs

Orbit Neumorphic Tabs

Soft moulded keys press inward and a pale light keeps orbiting the chosen one.

#shadow #animation #conic-gradient

Live preview Tabs

Pylon Filter Tabs

A pylon mast rises over the active filter and the chip list underneath swaps.

#animation #transform #badge

Live preview Tabs

Socket Privacy Tabs

Privacy levels shaped as sockets; the pin drops into the one you pick.

#animation #shadow #border

Live preview Tabs

Topaz Terminal Tabs

A small terminal window whose tab strip switches monospace panes with a blinking caret.

#animation #terminal #shadow

Live preview Tables

Granite Gradient Header

A wide gradient band sweeps across the header row in a slow continuous loop.

#table #gradient #header

Live preview Tables

Lagoon Empty State

When the query returns nothing the table falls back to a dashed panel that breathes.

#table #empty-state #placeholder

Live preview Text

Ballet Grace

Graceful ballet pink on text.

#animation #gradient #transform

Live preview Text

Blueberry Blue

Deep blue blueberry on text.

#animation #gradient #shadow

Live preview Text

3D Bounce

Text bouncing with a 3D perspective tilt.

#animation #transform

Live preview Text

Bounce Rhythm

Text bouncing up and down in a steady rhythm.

#animation #transform

Live preview Text

Boxing Glove

Boxing glove punching on text.

#animation #transform #shadow

Effects tagged #animation

Popular tags