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

Spinner Tip

Spinner loader tooltip above the trigger.

#hover #animation #transform

Live preview Tooltips

Spiral Tip

Tooltip that spirals into view above the trigger.

#hover #animation #transform

Live preview Tooltips

Static TV

Tooltip shows TV static before content above the trigger.

#hover #animation #gradient

Live preview Tooltips

Typewriter Fast

Fast typewriter tooltip above the trigger.

#hover #animation #transform

Live preview Tooltips

Typewriter Top

Tooltip text types itself out character by character.

#hover #animation #transform

Live preview Tooltips

Typing Cursor

Tooltip text types out with a blinking cursor above the trigger.

#hover #animation #transform

Live preview Tooltips

Vibrate Buzz

Tooltip that vibrates with a subtle buzz on hover.

#hover #animation #transform

Live preview Tooltips

Wave Tip

Tooltip that waves into view above the trigger.

#hover #animation #transform

Live preview Tooltips

Wobble Top

Tooltip wobbles side to side before settling above the trigger.

#hover #animation #transform

Live preview Tooltips

Zoom On Hover

Tooltip that zooms larger on hover above the trigger.

#hover #animation #transform

Live preview Timelines

Amber Pulse Timeline

The step in progress throbs with an expanding amber halo while the rest stay dim.

#animation #shadow #list

Live preview Timelines

Anvil Event Log

Timestamped machine lines carry their own level chip and the error row keeps a caret blinking.

#animation #hover #log

Live preview Timelines

Aurora Parcel Tracker

Three parcel checkpoints share one horizontal rail and the live leg keeps flowing.

#tracking #animation #gradient

Live preview Timelines

Bloom Seasons Timeline

A conic wheel splits the year into four seasons while a slow hand sweeps around it.

#conic-gradient #animation #grid

Live preview Timelines

Circuit Trace Timeline

Square pads hang off a board trace and a bright signal keeps travelling down it.

#circuit #animation #gradient

Live preview Timelines

Dune Upload Stages

Upload stages carry their own percentage and the busy bar marches with stripes.

#upload #animation #progress

Live preview Timelines

Ember Now Divider

Past entries sit dimmed above a glowing now divider while what is next stays lit.

#divider #animation #state

Live preview Timelines

Flint Milestone Timeline

Two plain flint stops flank one milestone marked by a glowing rotated diamond.

#transform #animation #shadow

Live preview Timelines

Frost Rail Timeline

A frosted vertical rail whose light drifts downward past three glowing event dots.

#gradient #animation #list

Live preview Timelines

Gear Chain Timeline

Toothed wheels turn in opposite directions and a bead chain links each stage.

#conic-gradient #animation #rotate

Live preview Timelines

Glacier Chat Thread

Timestamped bubbles land one after another and the reply leans to the far side.

#chat #animation #bubble

Live preview Timelines

Gleam Tally Timeline

Volunteer hours counted in hand drawn tally marks, the newest month still catching light.

#animation #layout #tally

Live preview Timelines

Glide Daylight Timeline

A sky band runs from dawn to night while a warm sun disc glides and dips across it.

#gradient #animation #day-night

Live preview Timelines

Kiln Meter Readings

Monthly meter readings sit in digit cells and the newest one keeps rolling over.

#animation #digits #transform

Live preview Timelines

Kindle Streak Timeline

A habit streak drawn as interlocking chain links where the newest one keeps flickering warm.

#animation #border #habit

Live preview Timelines

Meadow Episode List

Podcast episodes stack in order and the one playing swaps its arrow for an equaliser.

#audio #animation #progress

Live preview Timelines

Oasis Journey Route

Departure, transfer and arrival sit on a dotted route with a marker sliding across.

#route #animation #dashed

Live preview Timelines

Onyx Ring Timeline

Hollow onyx rings mark every step and the running one spins a dashed halo.

#border #animation #list

Live preview Timelines

Opal Progress Timeline

An opal fill climbs the rail on load and halts at the step still under way.

#animation #gradient #progress

Live preview Timelines

Orbit Sprint Cycle

Four sprint ceremonies sit around a dashed ring while a bead keeps orbiting them.

#animation #layout #border

Live preview Timelines

Pulse Vows Timeline

A clipped heartbeat silhouette beats above three milestones of one relationship.

#clip-path #animation #gradient

Live preview Timelines

Pylon Floor Indicator

A lit car rides its shaft and stops beside each floor listed on the right.

#animation #transform #layout

Live preview Timelines

Quartz Dashed Timeline

The dashed quartz rail slides downward between three rotated checkpoint squares.

#gradient #animation #background

Live preview Timelines

Quiver Level Timeline

Chunky pixel blocks track a learning path and the level in progress jitters one pixel at a time.

#animation #pixel #shadow

Live preview Timelines

Ratchet Line Steps

A pawl jumps from station to station along a toothed rail and never slides back.

#animation #transform #steps

Live preview Timelines

Ridge Day Agenda

An hour column runs down the left while the current slot keeps breathing.

#agenda #grid #animation

Live preview Timelines

Ripple Pledge Timeline

Each funding tier sends a thin arc rippling outward from the left edge of the row.

#animation #border #list

Live preview Timelines

Shaft Conveyor Stops

A belt keeps running over its rollers while three gate posts mark the packing stops.

#animation #gradient #conveyor

Live preview Timelines

Spiral Vinyl Timeline

Three grooved records sit in a rack and the selected one spins while its year stays upright.

#radio #animation #radial-gradient

Live preview Timelines

Tether Robot Cycle

A two segment arm walks through reach, grip and place before starting the cycle again.

#animation #transform #robot

Live preview Timelines

Turbine Service Windows

Running hours split into hatched service windows and the due one keeps drifting.

#gradient #animation #schedule

Live preview Timelines

Valve Stop Timeline

A standpipe carries flowing fluid past three handwheels and the last one is shut.

#animation #pipeline #border

Live preview Timelines

Willow Start And Finish

A waving start flag opens the route and a chequered bar closes it at the end.

#flag #animation #conic-gradient

Live preview Timelines

Wisp Movements Timeline

Blurred colour washes drift and blend into one another above three dated art movements.

#blend-mode #filter #animation

Live preview Timelines

Zenith Ascent Timeline

Growth milestones climb a slope towards the summit where the final marker keeps flaring.

#clip-path #flexbox #animation

Live preview Toggles

Acorn Fall

Acorn knob tumbles from the oak tree across the autumn track.

#animation #gradient #transform

Live preview Toggles

Alarm / Snooze

Shaking alarm clock settles into a snooze Z.

#animation #transform #shadow

Live preview Toggles

Allegro / Adagio

Knob spins fast (allegro) or slow (adagio) on the emerald track.

#animation #gradient #transform

Live preview Toggles

Atom Spin

Electron orbits ignite around a nucleus.

#animation #transform #shadow

Live preview Toggles

Aurora Borealis

Northern lights shimmer over an emerald knob.

#animation #gradient #transform

Live preview Toggles

Aurora Shimmer

Soft aurora shimmer dances across the polar night.

#animation #gradient #transform

Live preview Toggles

Aurora Veil

Northern lights shimmer across the track as the glowing knob slides.

#animation #gradient #transform

Live preview Toggles

Badge / Clear

Notification badge count clears away to empty.

#animation #transform #shadow

Live preview Toggles

Beat / Rest

Knob throbs like a heartbeat while the beat plays.

#animation #transform #shadow

Live preview Toggles

Beat / Silence

Pulsing beat dot flatlines into silence.

#animation #transform #shadow

Live preview Toggles

Beat / Still

Heartbeat knob goes still on the rose track when toggled.

#animation #transform #shadow

Live preview Toggles

Bell / Silent

Ringing bell tips over with a slash for silent mode.

#animation #transform #shadow

Live preview Toggles

Bolt Strike

Lightning bolt crackles across the track when struck.

#animation #gradient #transform

Live preview Toggles

Breeze / Still

Leaf sways in a breeze then rests still when off.

#animation #transform #shadow

Live preview Toggles

Bubble Rise

Air bubbles rise upward through the aquatic track.

#animation #gradient #transform

Live preview Toggles

Burn / Quench

Fire knob becomes a water droplet when quenched.

#animation #transform #shadow

Live preview Toggles

Calm / Angry

Calm face turns red and furious when toggled.

#animation #transform #shadow

Live preview Toggles

Car / Walk

Driving car swaps to a walking pedestrian.

#animation #transform #shadow

Live preview Toggles

Cassette Rewind

Cassette reels spin in reverse as the knob slides back.

#animation #gradient #transform

Live preview Toggles

Chiffon Sheer

Sheer chiffon fabric flows translucently across the track.

#animation #gradient #transform

Live preview Toggles

Cobalt Streak

Cobalt blue streak with lightning glow.

#animation #gradient #transform

Live preview Toggles

Color Burst Toggle

Toggling fires a radial color burst that ripples across the track.

#gradient #animation #shadow

Live preview Toggles

Confident / Nervous

Cool shades vs a sweat-dropped nervous face.

#animation #transform #shadow

Live preview Toggles

Conveyor Belt

Conveyor belt rolls packages across when active.

#animation #gradient #transform

Live preview Toggles

Crescendo / Decrescendo

Knob grows then shrinks in a breathing crescendo animation.

#animation #transform #shadow

Live preview Toggles

CRT Screen

Vintage CRT screen flickers on with phosphor glow.

#animation #gradient #transform

Live preview Toggles

Cursor Blink

Carets blink on/off to show editability.

#animation #transform #shadow

Live preview Toggles

Data Stream

Matrix-style data bits cascade behind the sliding knob.

#animation #gradient #transform

Live preview Toggles

Diamond Shine

Faceted diamond knob sparkles with brilliant reflections.

#animation #gradient #transform

Live preview Toggles

DNA Helix

Double helix unzips and rezips into a strand.

#animation #transform #shadow

Live preview Toggles

Ember Glow

Smoldering ember knob pulses with a warm orange glow.

#animation #gradient #transform

Live preview Toggles

Erupt / Dormant

Erupting volcano knob goes dormant on the crimson track.

#animation #transform #shadow

Live preview Toggles

Explore / Settle

Compass knob spins while exploring and halts when settling.

#animation #transform #shadow

Live preview Toggles

Fan Blade

Cooling fan blades spin up to cool the system.

#animation #gradient #transform

Live preview Toggles

Feather / Wing

Single feather unfurls into a flapping wing.

#animation #transform #shadow

Live preview Toggles

Film Strip

Film strip advances frame-by-frame as the knob slides.

#animation #gradient #transform

Live preview Toggles

Float / Sink

Knob bobs gently on a water-gradient track when floating.

#animation #gradient #transform

Live preview Toggles

Flutter / Rest

Fluttering heart knob rests steady on the pink track.

#animation #transform #shadow

Live preview Toggles

Frost Shard

Icy crystalline shard forms on the knob when frozen.

#animation #gradient #transform

Live preview Toggles

Galaxy Spin

Spiral galaxy core rotates with cosmic arms.

#animation #gradient #transform

Live preview Toggles

Galaxy Spiral

Spiral galaxy arms rotate as the cosmos spins up.

#animation #gradient #transform

Live preview Toggles

Ghost / Fade

Solid knob becomes a translucent ghostly figure.

#animation #transform #shadow

Live preview Toggles

Glide / Hover

Gliding knob hovers in place on the violet track.

#animation #transform #shadow

Live preview Toggles

Glissando / Step

Smooth glissando slide vs a stepped staircase knob motion.

#animation #transform #shadow

Live preview Toggles

Glitch Screen

Knob distorts with chromatic aberration glitch on toggle.

#animation #transform #shadow

Live preview Toggles

Gravity / Zero-G

Knob drops with gravity and floats up in zero-G on toggle.

#animation #transform #shadow

Live preview Toggles

Heart / Shield

Health heart morphs into an armor shield.

#animation #transform #shadow

Live preview Toggles

Hologram Glitch

Cyan hologram knob glitches with chromatic aberration.

#animation #gradient #transform

Live preview Toggles

Holographic Foil

Holographic foil shimmering with rainbow light reflections.

#animation #gradient #transform

Live preview Toggles

Hue Rotate Rainbow

Multi-hue rainbow track continuously hue-rotates while the knob is engaged.

#gradient #animation #shadow

Live preview Toggles

Hue Shift / Still

Hue-shifting rainbow knob steadies on the dark track.

#animation #gradient #transform

Popular tags