Live preview Loaders
#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
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Flip Card
A gradient card flipping 180 degrees back and forth on its vertical axis.
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Microwave Turntable
Microwave glass plate rotating with a glowing interior.
Live preview Loaders
Morph Blob Loader
A gradient blob melts between organic border-radius shapes while it rotates.
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Stopwatch Tick
A stopwatch face with a red second hand ticking in 60 discrete steps.
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Loaders
Live preview Navigation
Rotate Spin In Modal Navbar
Modal nav that rotates into view with a slight spin.
Live preview Navigation
Dark Fade Overlay Navbar
Side panel nav with a fading dark overlay backdrop.
Live preview Navigation
Fullscreen Menu Overlay Navbar
Full-screen overlay menu with large editorial typography links.
Live preview Navigation
Aurora Gradient Overlay Navbar
Modal nav over an aurora gradient animated background.
Live preview Navigation
Light Fade Overlay Navbar
Side panel nav with a fading light translucent backdrop.
Live preview Navigation
Live preview Sliders
Cove Circular Frame
A round instrument bezel with a slowly turning dashed ring around the inner rail.
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Text
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Live preview Tooltips
Typing Hint Tooltip
The tooltip shows three animated dots, as if the hint were still being written.
Live preview Timelines
Conduit Deploy Stages
Junction boxes sit on a twin conduit run and the stage in flight marches its stripes.
Live preview Timelines
Piston Pump Pipeline
Three bores drive the extract, transform and load stages with offset piston strokes.
Live preview Timelines
Sway Album Timeline
Three dated prints hang from a twisted cord and swing gently out of step with each other.
Live preview Toggles
Liquid Wave Fill
Track fills with an animated wavy liquid that sloshes as the knob slides.
Live preview Toggles
Live preview Toggles
Subscribe Bell
Gray bell turns gold and rings with a pulse wave when subscribed.
Live preview Toggles
Live preview Accordions
Ripple Quiet Accordion
Hairline rules and wide spacing only, with a dot that rings out while open.
Live preview Accordions
Shaft Params Accordion
Endpoint rows unpack a parameter grid whose gaps grow open from nothing.
Live preview Avatars
Circuit Broadcast Wave Avatar
A broadcast ring expands from the avatar while an equalizer meter reads the voice level.
Live preview Avatars
Dynamo Drawn Monogram Plate
An SVG stroke writes the monogram and then underlines it before restarting the loop.
Live preview Avatars
Gear Crown Leader Avatar
A clipped crown sways above the leader avatar and a rank pill hangs beneath it.
Live preview Avatars
Halo Blurred Aura Avatar
A heavily blurred conic aura turns behind the disc and breathes in and out.
Live preview Avatars
Orbit Counter Clockwise Loader
The outer arc turns anticlockwise while the inner arc turns the other way.
Live preview Avatars
Pulse Status Line Avatar
The presence colour lives in the status sentence instead of on the avatar corner.
Live preview Avatars
Rivet Achievement Star Avatar
A clipped star medal twinkles at the corner and a small counter reports earned awards.
Live preview Avatars
Sway Isometric Avatar Plane
Three member tiles lie on an isometric plane that rocks slowly around its centre.
Live preview Badges
Live preview Badges
Live preview Badges
Live preview Badges
Live preview Badges
Live preview Badges
Live preview Badges
Live preview Badges
Live preview Badges
Live preview Badges
Live preview Badges
Hue Shift FX Badge
Animated badge with gentle hue-shift in/out oscillation.
Live preview Badges
Live preview Badges
Soft Pulse FX Badge
Animated badge with gentle soft-pulse scale animation.
Live preview Badges
Live preview Badges
Live preview Badges
Shadow Shrink FX Badge
Animated badge with shrinking shadow press effect.
Live preview Badges
Swing FX Badge
Animated badge that swings like a pendulum from top anchor.
Live preview Badges
Live preview Badges
Hue Rotate Pill
Pill that cycles through all hues via hue-rotate filter.
Live preview Badges
Live Pulse Badge
A broadcast badge whose red dot sends out a fading ring on every beat.
Live preview Badges
Pulsing Notification
Notification badge that scales pulse to grab attention.
Live preview Badges
Live preview Badges
Live preview Badges
Volcano Lava Badge
Lava-flow badge with animated red-orange ember gradient.
Live preview Backgrounds
Accretion Disk
A superheated accretion disk spirals around a central black mass.