#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

Vinyl Record

Vinyl record spinning under a tonearm needle.

#animation #gradient #transform

Live preview Loaders

Volcano Erupt

Volcano erupting with lava spewing and smoke rising.

#animation #gradient #transform

Live preview Loaders

Volleyball

Volleyball spinning with curved stripe pattern.

#animation #gradient #transform

Live preview Loaders

Wave Bars Loader

Five vertical bars rise and fall like an audio equalizer at even offsets.

#animation #gradient #transform

Live preview Loaders

Waffle Press

Waffle iron pressing.

#animation #gradient #transform

Live preview Loaders

Walkman

Walkman cassette player with a rotating tape reel inside.

#animation #gradient #transform

Live preview Loaders

Warp Drive

Warp drive stretching space around ship.

#animation #transform #border

Live preview Loaders

Water Balloon

Water balloon wobbling.

#animation #gradient #transform

Live preview Loaders

Water Tower

Water tower with sloshing water.

#animation #gradient

Live preview Loaders

Waterfall

Water cascading down a cliff into a pool below.

#animation #gradient

Live preview Loaders

Waterspout

Waterspout rising from water surface.

#animation #gradient #transform

Live preview Loaders

Wave Bars

Six blue bars riding a sinusoidal wave up and down.

#gradient #animation #border

Live preview Loaders

Wave Block Shift

Wave of blocks shifting up and down.

#animation #transform

Live preview Loaders

Weave Shift

Woven strips shifting in opposite directions.

#animation #transform

Live preview Loaders

Werewolf Howl

Werewolf howling at moon.

#animation #gradient #transform

Live preview Loaders

Wheel Spin

Wheel with spokes spinning.

#animation #gradient #transform

Live preview Loaders

Whisk Spin

Kitchen whisk spinning to whip up a swirl of mixture.

#animation #transform #border

Live preview Loaders

White Dwarf

Dense white dwarf star shimmering.

#animation #gradient #transform

Live preview Loaders

Windmill Pinwheel

Four colored blades spinning around a central hub.

#gradient #animation #border

Live preview Loaders

Windmill Blade

Windmill with spinning blades.

#animation #gradient #transform

Live preview Loaders

Window Shutter

Window shutters opening and closing.

#animation #gradient #transform

Live preview Loaders

Windshield Wiper

Windshield wiper swiping back and forth across raindrops.

#animation #gradient #transform

Live preview Loaders

Witch Broom Fly

Witch flying on broomstick.

#animation #gradient #transform

Live preview Loaders

Wood Block Tap

Wood block being tapped.

#animation #gradient #transform

Live preview Loaders

Worm Gear

Worm screw driving a gear.

#animation #gradient #transform

Live preview Loaders

Wormhole

Wormhole tunnel with concentric rings.

#animation #transform #border

Live preview Loaders

Wrench Turn

Wrench tightening a bolt with ratcheting motion.

#animation #gradient #transform

Live preview Loaders

Yo-Yo Spin

Yo-yo spinning on string.

#animation #gradient #transform

Live preview Loaders

Ziggurat Tier

Ziggurat with stacked tiers.

#animation #gradient #filter

Live preview Loaders

Zodiac Wheel

Zodiac wheel rotating with twelve symbols.

#animation #gradient #transform

Live preview Loaders

Zoom Burst Rays

Rays bursting outward from center.

#animation #gradient #transform

Live preview Navigation

Arrow Asterisk Spin Navbar

Nav with spinning asterisk arrow accent on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Bounce Drop Navbar

Nav with arrow indicators that bounce-drop on hover.

#hover #animation #transform

Live preview Navigation

Arrow Floating Bob Navbar

Nav links with floating arrow indicators that bob up and down.

#hover #animation #transform

Live preview Navigation

Arrow Gradient Flow Navbar

Nav with gradient animated arrow indicators.

#hover #animation #gradient

Live preview Navigation

Arrow Heart Beat Navbar

Nav with heart-beat arrow accent on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Neon Active Navbar

Nav with neon glowing arrow on the active item.

#hover #animation #shadow

Live preview Navigation

Arrow Outline Draw Navbar

Nav with arrow outline drawn on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Pulse Throb Navbar

Nav arrow indicators pulse and throb on the active item.

#hover #animation #transform

Live preview Navigation

Arrow Wave Flow Navbar

Nav with wavy arrow flow separators between items.

#hover #animation #transform

Live preview Navigation

Arrow Zigzag Flow Navbar

Nav with zigzag-shaped arrow flow separators.

#hover #animation #transform

Live preview Navigation

Aurora Background Navbar

Navbar with aurora-like animated gradient blobs.

#hover #animation #gradient

Live preview Navigation

Bob Buoyant Navbar

Links bob up and down buoyantly on hover.

#hover #animation #gradient

Live preview Navigation

Breathe Glow Navbar

Active link breathes with a soft expanding glow halo.

#hover #animation #shadow

Live preview Navigation

Bounce Hamburger

Hamburger that bounces on hover.

#hover #animation #transform

Live preview Navigation

Gradient Arrow Breadcrumbs

Breadcrumbs with gradient arrow separators.

#hover #animation #gradient

Live preview Navigation

Floating Overlay Drawer Navbar

Floating drawer that overlays content without pushing it.

#hover #animation #transform

Live preview Navigation

Blur Overlay Drawer Navbar

Drawer over a frosted blurred backdrop.

#hover #animation #gradient

Live preview Navigation

Dim Overlay Drawer Navbar

Drawer over a dimmed dark overlay backdrop.

#hover #animation #transform

Live preview Navigation

3D Left Drawer Navbar

Left drawer with 3D perspective slide revealing main nav beside it.

#hover #animation #gradient

Live preview Navigation

3D Right Drawer Navbar

Right drawer with 3D perspective slide.

#hover #animation #gradient

Live preview Navigation

Glow Pulse Navbar

Navbar with pulsing glow around active link.

#hover #animation #shadow

Live preview Navigation

Gradient Border Navbar

Navbar with animated gradient border around active link.

#hover #animation #gradient

Live preview Navigation

Holographic Navbar

Navbar with holographic gradient overlay.

#hover #animation #gradient

Live preview Navigation

Gradient Icon Nav

Icon nav with animated gradient background.

#hover #animation #gradient

Live preview Navigation

Planet Rotation Menu

Center sun with planet items rotating around it on a continuous orbit path.

#hover #animation #gradient

Live preview Navigation

Ring Spin Menu

Menu items arranged on a ring that continuously rotates with hover-pause.

#hover #animation #gradient

Live preview Navigation

Solar System Menu

Solar system layout with planets on concentric orbit rings of different speeds.

#hover #animation #gradient

Live preview Navigation

Dark Blurred Overlay Navbar

Dark overlay with heavy backdrop blur covering the page content.

#hover #animation #gradient

Live preview Navigation

Bottom Sheet Handle Navbar

Bottom sheet with a draggable handle and pull-up indicator.

#hover #animation #gradient

Live preview Navigation

Side Panel Tabs Navbar

Side panel with vertical tabs over a dimmed overlay.

#hover #animation #gradient

Live preview Navigation

Active Pulse Pagination

Active page pulses with animation.

#hover #animation #shadow

Live preview Navigation

Arrow Bounce Pagination

Pagination with bouncing arrow buttons on hover.

#hover #animation #transform

Live preview Navigation

Gradient Pagination

Pagination with gradient active button.

#hover #animation #gradient

Live preview Navigation

Infinite Scroll Pagination

Animated loading indicator for infinite scroll.

#animation #transform

Live preview Navigation

Load More Button Pagination

Stylized load more button with shimmer.

#hover #animation #gradient

Live preview Navigation

Progress Bar Pagination

Pagination with a progress bar above numbers.

#hover #animation #gradient

Live preview Navigation

Gradient Pill Nav

Pill nav with animated gradient active state.

#hover #animation #gradient

Live preview Navigation

Glow Trail Step Nav

Stepper with a glowing trail line that pulses along the active path.

#hover #animation #gradient

Live preview Navigation

Ribbon Flag Wave Nav

Active tab styled as a waving flag ribbon extending below the link.

#hover #animation #gradient

Live preview Navigation

Scroll Progress Bar

A reading progress bar driven by scroll-linked animation, with no script at all.

#animation #gradient #transform

Live preview Navigation

Shake Jitter Navbar

Links shake-jitter on hover with a horizontal animation.

#hover #animation #transform

Live preview Navigation

Bottom Sheet Navbar

Mobile bottom sheet that slides up to reveal nav links.

#hover #animation #transform

Live preview Navigation

Back Arrow Sheet Navbar

Sheet with a back arrow navigation button at the top.

#hover #animation #gradient

Live preview Navigation

Close X Sheet Navbar

Bottom sheet with an X close button in the corner.

#hover #animation #gradient

Live preview Navigation

Grip Handle Sheet Navbar

Bottom sheet with a prominent grip handle and drag indicator.

#hover #animation #gradient

Live preview Navigation

Left Slide Sheet Navbar

Vertical sheet sliding in from the left with stacked links.

#hover #animation #transform

Live preview Navigation

Right Slide Sheet Navbar

Vertical sheet sliding in from the right with profile-style links.

#hover #animation #transform

Live preview Navigation

Top Drop Sheet Navbar

Sheet that drops down from the top of the navbar revealing links.

#hover #animation #transform

Live preview Navigation

Slant Gradient Flow Navbar

Slanted nav with an animated gradient background flow.

#hover #animation #gradient

Live preview Navigation

Slant Neon Edge Navbar

Slanted nav with pulsing neon pink edge accents.

#hover #animation #shadow

Live preview Navigation

Split Arrow Flow Navbar

Nav links separated by arrow flow indicators pointing right.

#hover #animation #transform

Live preview Navigation

Split Dot Flow Navbar

Nav links separated by pulsing dot flow indicators.

#hover #animation #transform

Live preview Navigation

Gradient Step Indicator

Step indicator with animated gradient on active.

#hover #animation #gradient

Live preview Navigation

Swing Pendulum Navbar

Links swing like a pendulum anchored at the top on hover.

#hover #animation #transform

Live preview Navigation

Animated Underline Tabs

Tabs with continuously animated underline.

#hover #animation #gradient

Live preview Navigation

Gradient Background Tabs

Tabs with animated gradient background on active.

#hover #animation #gradient

Live preview Navigation

Text Neon Flicker Navbar

Active link text flickers like a real neon sign.

#hover #animation #shadow

Popular tags