# animation CSS effects

Live preview Loaders

Match Strike

Match striking and igniting.

Live preview Loaders

Merry-Go-Round

Rotating platform with three colored horses spinning around.

Live preview Loaders

Metronome Tick

Metronome pendulum ticking.

Live preview Loaders

New Year Ball Drop

New Year's Eve ball descending.

Live preview Loaders

Pan Flute

Pan flute pipes of varying lengths.

Live preview Loaders

Pearl Glow

Pearl with soft iridescent glow.

Live preview Loaders

Pentagon Flower Spin

Five-petal flower spinning.

#animation #gradient #filter

Live preview Loaders

Pillar Column

Classical column with capital.

Live preview Loaders

Pole Vault

Pole vaulter going over bar.

Live preview Loaders

Heptagon Rotate

Seven-sided polygon rotating.

Live preview Loaders

Popcorn Popper

Popcorn kernels popping.

#animation #transform #border

Live preview Loaders

Pretzel Twist

Pretzel with twisting arms.

Live preview Loaders

Prevailing Wind

Prevailing wind direction arrows.

#animation #border

Live preview Loaders

Rolling Pin

Rolling pin spinning back and forth over dough.

Live preview Loaders

Santa Sleigh Fly

Santa's sleigh flying across.

Live preview Loaders

Satellite Dish

Satellite dish emitting signal waves.

Live preview Loaders

Saxophone

Saxophone with keys pressing along its curved body.

#animation #transform #border

Live preview Loaders

Sextant

Sextant arc with swinging arm.

Live preview Loaders

Shape Explode Reform

Shape exploding outward and reforming.

Live preview Loaders

Spacetime Warp

Spacetime grid warping under gravity.

#gradient #animation #transform

Live preview Loaders

Spinning Top

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

Live preview Loaders

Spotlight Spin

Spotlight spinning in full circle.

Live preview Loaders

Steel Drum

Steel drum with concave surface.

Live preview Loaders

Stepper Motor

Stepper motor stepping in increments.

#animation #gradient #border

Live preview Loaders

Tape Measure

Tape measure extending and retracting its yellow ribbon.

Live preview Loaders

Tempest

Violent tempest swirling.

Live preview Loaders

Tomato Slice

Tomato slice with seed pattern.

#animation #gradient #filter

Live preview Loaders

Totem Rise

Tribal totem rising with eyes glowing.

Live preview Loaders

Track Lane

Runner sprinting around an athletics track oval.

#gradient #animation #shadow

Live preview Loaders

Trampoline Bounce

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

Live preview Loaders

Triangle Orbit Dots

Three colored dots orbiting in a triangular path.

#animation #transform #border

Live preview Loaders

Triangle Stack

Nested triangles rotating opposite.

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 #border #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.

Live preview Loaders

Water Clock

Ancient water clock filling.

#animation #gradient

Live preview Loaders

Wind Gust

Wind gust lines blowing.

Live preview Loaders

Wine Pour

Wine pouring into glass.

Live preview Loaders

Xylophone Mallet

Mallet striking xylophone bars.

Live preview Loaders

Zombie Shuffle

Zombie shuffling across screen.

Live preview Navigation

Animated Arrow Breadcrumbs

Breadcrumbs with animated moving arrows.

#hover #animation #border

Live preview Navigation

Push Content Left Drawer Navbar

Left drawer pushes the main content rightward when opening.

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

Live preview Navigation

Gradient Flow Navbar

Navbar with an animated gradient background flowing across links.

Live preview Navigation

Jello Wiggle Navbar

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

#hover #animation #gradient

Live preview Navigation

Split Line Gradient Flow Navbar

Nav links separated by animated gradient line dividers.

Live preview Navigation

Text Glitch Hover Navbar

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

Live preview Navigation

Text Glow Pulse Link Navbar

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

Live preview Navigation

Text Shadow Dance Navbar

Hovered links perform a layered text-shadow dance animation.

Live preview Navigation

Vertical Tab Neon Active Line

Vertical tabs with a pulsing neon active line indicator.

Live preview Navigation

Wobble Jiggle Navbar

Links wobble-jiggle on hover using a keyframe animation.

#animation #transform #gradient

Live preview Progress

Amber Sheen Progress

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

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

Coral Comet Progress

The fill ends in a pulsing comet head that keeps glowing at the leading edge of the track.

#sine-wave #svg #animation

Live preview Progress

Organza Sway Progress

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

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 Sliders

Amber Glow Slider

A dim ember rail runs beneath a knob that breathes its own pulsing amber halo.

#slider #neon #animation

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

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

#animation #blend-mode #filter

Drift Light Leak Tabs

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

#gradient #animation #border

Forge Numbered Tabs

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

#layout #animation #border

Monsoon Two Column Panel Tabs

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

#shadow #animation #conic-gradient

Orbit Neumorphic Tabs

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

#animation #transform #badge

Pylon Filter Tabs

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

#animation #terminal #shadow

Topaz Terminal Tabs

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

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

Ballet Grace

Graceful ballet pink on text.

Blueberry Blue

Deep blue blueberry on text.

3D Bounce

Text bouncing with a 3D perspective tilt.

Bounce Rhythm

Text bouncing up and down in a steady rhythm.

Boxing Glove

Boxing glove punching on text.

#animation #gradient #filter

Byzantine Mosaic

Byzantine gold mosaic on text.

Cadenza Solo

Virtuosic solo cadenza on text.

Cards Shuffle

Shuffling playing cards on text.

Carnival Mask

Mardi Gras carnival mask on text.

#animation #shadow #filter

Cathedral Gothic

Gothic cathedral dark stone on text.

Chess Bishop

Chess bishop on diagonal on text.

Circus Tent

Circus striped tent on text.

#animation #transform #filter

Color Shift Cycle

Animated color hue shift cycle.

#animation #transform #filter

Color Wheel Spin

Color wheel spinning hue rotation.

Compass Needle

Compass needle pointing direction on text.

Concert Hall

Grand concert hall on text.

#animation #shadow #transform

Count Up Roller

A single digit cycling 0 through 9 on a stepped roller, like an odometer.

Cranberry Tart

Tart red cranberry on text.

#animation #shadow #transform

Cyberpunk Glitch

Yellow cyberpunk text with red/cyan offset and periodic skew glitch.

Cymbal Crash

Loud cymbal crash burst on text.

Daffodil Trumpet

Yellow daffodil trumpet cup on text.