Live preview Navigation
Text Rainbow Flow Navbar
Active link text flows through a rainbow gradient animation.
#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 Navigation
Text Scramble Hover Navbar
Hovered links scramble their letters via a positional jitter animation.
Live preview Navigation
Live preview Progress
Arcade Pulse Progress
A retro cabinet meter made of chunky bevelled pixel blocks where the leading block keeps flashing.
Live preview Progress
Brass Thread Progress
A hairline track with rounded caps whose warm brass fill breathes between six and eighty four percent.
Live preview Progress
Brocade Coil Progress
A bobbin seen side on where the wound thread covers the core and the loose strand keeps tugging.
Live preview Progress
Caliper Runner Progress
An open ended loader where a train of five dots keeps running through the tube from left to right.
Live preview Progress
Cascade Trail Progress
A vertical pipeline trail whose rail fills down to the running stage while that node keeps pulsing.
Live preview Progress
Circuit Manometer Progress
A round pressure dial with a tick ring, a red danger band and a needle that keeps quivering.
Live preview Progress
Conduit Sync Progress
Two chasing arrow arcs turn forever beside a device count and the current sync share.
Live preview Progress
Cove Status Progress
The status line and the bar share one timeline, so the label flips to complete as the fill lands.
Live preview Progress
Dune Track Progress
A race rail with distance ticks and a chequered flag while a glowing marker runs the lap.
Live preview Progress
Dynamo Twinring Progress
A hairline outer arc carries the value while a dotted inner ring keeps turning for state.
Live preview Progress
Enamel Flux Progress
Beads of enamel travel in and merge into the filled mass through a blur and contrast gooey filter.
Live preview Progress
Flange Vumeter Progress
An analogue volume unit meter whose needle keeps flicking across a scale into the red end.
Live preview Progress
Flint Orbit Progress
A slim conic ring with the percentage printed at its centre and a slow pulsing halo.
Live preview Progress
Forge Conveyor Progress
Crates ride a treading belt and drop into a bin that is already filled to two thirds.
Live preview Progress
Gear Copy Progress
A copy dialog where a sheet keeps flying from the source folder into the destination folder.
Live preview Progress
Girder Odometer Progress
Two mechanical digit reels roll through their numbers behind a fixed percent sign.
Live preview Progress
Indigo Ripple Progress
An organic ink blot marks the covered share while three rings keep spreading out from it.
Live preview Progress
Ivory Slide Progress
An indeterminate bar: a soft ivory shuttle keeps running across the track with no fixed value.
Live preview Progress
Kiln Aperture Progress
A gate valve leaves part of the port open and the flow behind it keeps drifting upward.
Live preview Progress
Lagoon Topbar Progress
The hairline page loader that lives on top of a browser frame and stalls near the end.
Live preview Progress
Lattice Fuel Progress
A fuel gauge with a blinking droplet icon, empty and full end marks and a low reserve fill.
Live preview Progress
Lever Beacon Progress
A three lamp tower where only the running stage is lit and the other two stay dark.
Live preview Progress
Lumen Gleam Progress
A lamp throws a volumetric beam whose reach is the value, ending in a flickering lens flare.
Live preview Progress
Mauve Quiver Progress
An organic ring holds the value arc while its outline morphs and breathes on a slow cycle.
Live preview Progress
Mosaic Orbit Progress
A hexagonal cell fills from its base instead of a circle while a small hex satellite orbits it.
Live preview Progress
Muslin Drift Progress
A sealed chamber fills with fog while two blurred puffs waft sideways at different speeds.
Live preview Progress
Nickel Timer Progress
A countdown bar that drains from full to empty and shifts from green through amber to red.
Live preview Progress
Ochre Wander Progress
Sand runs out of a funnel in a thin stream and the grains wander down onto a growing heap.
Live preview Progress
Opal Tide Progress
A round vessel filled to sixty two percent with a rotating blob that reads as a moving tide.
Live preview Progress
Piston Tachometer Progress
A rev counter whose banded arc runs into a red zone while the pointer keeps sweeping the range.
Live preview Progress
Plume Spiral Progress
An arc built spiral winds outward through a stroke dash offset instead of running along a bar.
Live preview Progress
Pylon Cogwheel Progress
A toothed wheel turns against a smaller counter rotating one while a ring holds the value.
Live preview Progress
Quartz Drift Progress
The violet fill carries a striped overlay that slides sideways forever while the width stays put.
Live preview Progress
Reef Dots Progress
Carousel page dots where the active pill stretches and hosts its own autoplay timer bar.
Live preview Progress
Rivet Defrag Progress
A dense disk map of sixty blocks in three states with a scanning beam crossing the grid.
Live preview Progress
Ruby Drop Progress
A download row with a bobbing arrow glyph, a transferred size read out and a ruby fill.
Live preview Progress
Socket Squeeze Progress
A compression read out where the packed lane keeps collapsing against the raw lane above it.
Live preview Progress
Spindle Signal Progress
Four rising strength bars where three are lit and the leading one keeps breathing on the edge.
Live preview Progress
Thicket Countdown Progress
An SVG ring counts a window down by animating its stroke dash offset all the way around.
Live preview Progress
Tide Tube Progress
A vertical glass tube holds a liquid level at fifty five percent while bubbles rise through it.
Live preview Progress
Tundra Glass Progress
An hourglass built from two clipped triangles where the upper chamber drains as the lower one packs.
Live preview Progress
Turbine Charge Progress
An upright cell whose electrolyte keeps climbing behind a bolt glyph while it charges.
Live preview Progress
Valve Toolchain Progress
Three build stages chained by chevrons, each carrying its own meter and the live one still filling.
Live preview Progress
Vellum Verge Progress
Ink soaks across a fibrous paper strip and the blurred wet edge keeps creeping at the verge.
Live preview Progress
Velour Lull Progress
A neumorphic groove pressed into a soft slab, holding a raised pill and a slowly breathing marker.
Live preview Progress
Violet Kindle Progress
A jagged discharge path where the charged section is stroked bright and keeps sparking unevenly.
Live preview Progress
Vitrine Glide Progress
A frosted glass panel floating over coloured light, with a specular streak gliding across it.
Live preview Progress
Willow Halo Progress
A hairline gradient halo turns forever around a static value arc that holds forty six percent.
Live preview Sliders
Cobalt Focus Slider
Keyboard focus expands a cobalt halo around the handle instead of a flat outline.
Live preview Sliders
Drift Leak Slider
A warm film light leak keeps sweeping over the panel in screen blend while the knob glows.
Live preview Sliders
Ember Spark Slider
The handle carries a spark glyph drawn from background bars and flickers as it burns.
Live preview Sliders
Flux Holo Slider
An iridescent film keeps drifting through the rail and the sample strip above it.
Live preview Sliders
Forge Log Scale
Evenly spaced decades give a logarithmic frequency feel under a glowing ember readout.
Live preview Sliders
Gasket Opacity Checker
A checkerboard bed shows through a plate whose alpha keeps breathing up and back down.
Live preview Sliders
Kiln Thermometer Tube
A glass column with a glowing bulb below it stands in for the handle of a kiln thermometer.
Live preview Sliders
Kindle Trail Slider
A single ember keeps running along a dotted fuse line that sits under the thin amber rail.
Live preview Sliders
Lever Loop Range
A bar waveform sits above a raked lever that picks how many bars the loop repeats for.
Live preview Sliders
Monsoon Notched Grip
Three cut notches score the grip while slanted rain streaks drift across the rail.
Live preview Sliders
Quiver Wave Slider
The rail is a chain of alternating arcs forming a sine wave that keeps drifting sideways.
Live preview Sliders
Ripple Sketch Slider
A notebook doodle: wobbly ink border, a double pencil stroke rail and a hand drawn blob handle.
Live preview Sliders
Shaft Minute Timer
A ticking CSS clock face sits beside a rail that dials the countdown in five minute steps.
Live preview Sliders
Spindle Axis Joystick
A crosshair gate pad reports the stick position while the rail trims the horizontal axis.
Live preview Sliders
Turbine Throttle Pair
A spinning hub sits beside stacked rails whose colour-coded handles trim top speed and acceleration.
Live preview Sliders
Vault Pixel Slider
An eight bit console panel with a stepped pixel frame, blocky rail cells and a blinking caret.
Live preview Tabs
Anvil Status Filter Tabs
Status filters with a heavy two pixel frame and no shadow, struck flat.
Live preview Tabs
Arc Vapor Tabs
A vaporwave grid horizon where the underline swings along a shallow arc, not a line.
Live preview Tabs
Bearing Difficulty Tabs
Difficulty tabs counted in bearing balls that seat themselves when chosen.
Live preview Tabs
Conduit Sort Direction Tabs
Two tabs flip one shared list end over end instead of swapping panels.
Live preview Tabs
Copper Badge Tabs
Each tab carries a count badge and the active one pulses in warm copper.
Live preview Tabs
Cusp Cartoon Tabs
Thick outlined comic tabs that squash and spring back the moment they are picked.
Live preview Tabs
Dynamo Tracking Tabs
The active label spreads its letters apart while a charge line sweeps beneath it.
Live preview Tabs
Echo Pixel Tabs
An eight bit console strip where the marker jumps in visible pixel steps, never smoothly.
Live preview Tabs
Ember Subtitle Tabs
Every tab carries a small caption line that catches fire when the tab is chosen.
Live preview Tabs
Flux Holographic Tabs
An iridescent foil surface whose rainbow sheen keeps travelling over the chosen tab.
Live preview Tabs
Garnet Slide Tabs
Deep garnet chips select a panel that slides in from the right on every switch.
Live preview Tabs
Gasket Turning Panel Tabs
Panels seat themselves with a combined scale and rotation, like a gasket ring.
Live preview Tabs
Gear Payment Method Tabs
Payment method tabs where the cog of the chosen method keeps turning slowly.
Live preview Tabs
Glacier Package Manager Tabs
Install command tabs for three package managers with a cold monospace command line.
Live preview Tabs
Gleam Lacquer Tabs
Deep lacquered plates where a narrow specular highlight sweeps over the open tab.
Live preview Tabs
Halo Mist Tabs
A soft aura swells out of the chosen tab while the panel resolves out of a haze.
Live preview Tabs
Jade Outline Tabs
Selecting a tab fires a jade ring that expands out of its rounded outline.
Live preview Tabs
Kiln Stacked Icon Tabs
Tabs stack a glyph over its label and the active glyph glows kiln orange.
Live preview Tabs
Kindle Riso Print Tabs
Two risograph ink layers start out of register and snap together on the chosen tab.
Live preview Tabs
Lapis Scale Tabs
A small dot marks the active tab and the panel scales up out of a blur.
Live preview Tabs
Lever Tilt Tabs
The chosen tab tips over its pivot and the panel swings in from the same hinge.
Live preview Tabs
Lull Origami Tabs
Folded paper facets where the panel drops open on a crease along its top edge.
Live preview Tabs
Oasis Sort Filter Tabs
Sort chips with a turning arrow, reordering a short result list one row at a time.
Live preview Tabs
Obsidian Hover Tabs
Hovering previews a tab in indigo before the click; the panel rises from below.
Live preview Tabs
Opal Thick Underline
A thick underline drifts between tabs while its opal gradient keeps shifting.
Live preview Tabs
Prairie Growing Panel Tabs
The panel box grows or shrinks to the height each tab actually needs, in one motion.
Live preview Tabs
Quiver Mosaic Tabs
Stained glass tabs over dark grout whose panel tiles light up one after another.
Live preview Tabs
Reef Centered Pill Tabs
Centred pill tabs on an open bar; the active pill keeps breathing in coral light.
Live preview Tabs
Socket Privacy Tabs
Privacy levels shaped as sockets; the pin drops into the one you pick.