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

Music Player

Compact music player card with album art, an animated progress bar and playback controls.

#gradient #animation #shadow

Live preview Cards

Mystic Rune Card

Mystic card with a slowly rotating rune circle and a glowing central sigil.

#animation #gradient #transform

Live preview Cards

Neon Edge Card

Cyberpunk-style card with a pulsing neon outline and corner accents.

#animation #glow #hover

Live preview Cards

Notification Toast

Slide-in notification toast with an app icon, title, message and timestamp.

#gradient #animation #shadow

Live preview Cards

Perfume Bottle Spray Card

Perfume bottle card with fragrance name, notes, and spray mist.

#animation #gradient #transform

Live preview Cards

Progress Card

Goal progress card with a percentage, animated bar, and a streak counter.

#animation #gradient #shadow

Live preview Cards

Ramen Bowl Steam Card

Ramen bowl card with noodles, broth, toppings, and rising steam.

#animation #gradient #transform

Live preview Cards

Rare Glow Card

Rare-tier card framed in a pulsing blue energy border with a crystalline emblem.

#animation #gradient #shadow

Live preview Cards

Reminder Card

Reminder card with a bell icon, snooze option, and a soft pastel background.

#animation #gradient #transform

Live preview Cards

Retro Terminal Card

Old-school CRT terminal card with scanlines, blinking cursor and monochrome green.

#gradient #animation #shadow

Live preview Cards

RPG Map Card

Treasure map card with a parchment texture, dotted path, and an X marker.

#animation #gradient #transform

Live preview Cards

Scratch Card

Scratch-off card with a metallic foil patch, prize hint, and a coin-edge detail.

#animation #gradient #transform

Live preview Cards

Seasonal Card

Seasonal autumn card with falling leaves, warm orange palette, and pumpkin badge.

#animation #gradient #transform

Live preview Cards

Shine Sweep Card

Card with a diagonal shine that sweeps across the surface on hover.

#gradient #animation #hover

Live preview Cards

Solar System Card

Solar system card with planets, sun, and orbital paths.

#animation #gradient #transform

Live preview Cards

Success Toast Card

Success toast card with a check icon, message, and an auto-dismiss progress.

#animation #transform #shadow

Live preview Cards

Tarot: The Moon

Moon tarot card with a crescent, two towers silhouette, and a starry veil.

#animation #gradient #shadow

Live preview Cards

Tarot: The Star

Tarot card with a glowing seven-point star and a deep indigo nightscape.

#animation #gradient #transform

Live preview Cards

Treasure Chest Card

Treasure chest card with an open lid, glowing gold pile, and a sparkle effect.

#animation #gradient #transform

Live preview Cards

Trophy Card

Trophy card with a golden cup, glowing aura, and a pedestal nameplate.

#animation #gradient #transform

Live preview Cards

Twitch Follow Channel Card

Twitch channel card with streamer avatar, live status, and follow button.

#animation #gradient #shadow

Live preview Cards

Valet Ticket Card

Valet ticket card with a numbered stub, key icon, and claim instructions.

#animation #gradient #transform

Live preview Cards

Vinyl Record Card

Vinyl record card with a spinning grooved disc and a center label.

#animation #gradient #transform

Live preview Cards

Weather Card

Weather forecast card with a spinning sun icon, temperature, location and a 5-day strip.

#gradient #animation #shadow

Live preview Cards

Rain Weather Card

Rainy weather card with animated raindrops streaking down a slate-blue card.

#animation #gradient #shadow

Live preview Cards

Storm Weather Card

Storm weather card with lightning flash, dark clouds, and a wind speed readout.

#animation #gradient #transform

Live preview Cards

Sunny Weather Card

Sunny weather card with a rotating sun, warm sky gradient, and UV index.

#animation #gradient #transform

Live preview Cards

Welcome Card

Welcome card with a waving hand, open door motif, and a soft sunrise gradient.

#animation #gradient #transform

Live preview Checkboxes

Asteroid Rock Toggle

A jagged asteroid spins and lights up when checked.

#animation #gradient #transform

Live preview Checkboxes

Aurora Borealis Wave

A flowing wave of green and purple aurora lights up when checked.

#animation #gradient #transform

Live preview Checkboxes

Banana Peel Toggle

A banana wiggles yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Bee Buzz Toggle

A bee buzzes with a yellow glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Beetle Crawl Toggle

A beetle crawls with a teal glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Bell Ring Toggle

A bell rings with a gold glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Bird Chirp Toggle

A bird flutters with a sky glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Black Tea Toggle

A black tea bounces brown on check.

#animation #transform #shadow

Live preview Checkboxes

Blackberry Toggle

A blackberry pulses purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Black Hole Swirl

A swirling vortex with a dark center draws matter inward when checked.

#animation #gradient #transform

Live preview Checkboxes

Blimp Toggle

A blimp floats horizontally when checked.

#animation #transform #shadow

Live preview Checkboxes

Boar Charge Toggle

A boar shakes with a brown glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Lightning Bolt Zap

An SVG lightning bolt that zaps in with an electric yellow glow when toggled on.

#animation #shadow #border

Live preview Checkboxes

Dashed Border March

A dashed border that marches around the box when checked.

#animation #transform #border

Live preview Checkboxes

Gradient Border

A vibrant gradient border that appears when checked.

#animation #gradient #transform

Live preview Checkboxes

Pulsing Border

A checkbox whose border pulses continuously when checked.

#animation #transform #shadow

Live preview Checkboxes

Bulb Idea Toggle

A bulb glows yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Bumblebee Toggle

A bumblebee shakes yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Circle Burst Confetti

On check, a burst of confetti particles flies outward from the checkbox center.

#animation #border #transform

Live preview Checkboxes

Butterfly Flutter Toggle

A butterfly flutters with a violet glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Candle Flame Toggle

A candle flickers orange when checked.

#animation #transform #shadow

Live preview Checkboxes

Candy Stripe Fill

A checkbox filled with animated diagonal candy stripes when checked.

#gradient #animation #border

Live preview Checkboxes

Cardinal Toggle

A cardinal bounces red on check.

#animation #transform #shadow

Live preview Checkboxes

Caterpillar Crawl Toggle

A caterpillar wiggles with a lime glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cherry Pair Toggle

A cherry pair bounces with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cherry Blossom Toggle

A cherry blossom glows pink when checked.

#animation #transform #shadow

Live preview Checkboxes

Chickadee Toggle

A chickadee shakes gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Rock Climbing Toggle

A climber spins brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Rain Cloud Toggle

A rain cloud glows blue when checked.

#animation #transform #shadow

Live preview Checkboxes

Cockroach Toggle

A cockroach bounces brown on check.

#animation #transform #shadow

Live preview Checkboxes

Construction Toggle

A construction site shakes yellow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cormorant Toggle

A cormorant spins black when checked.

#animation #transform #shadow

Live preview Checkboxes

Cortado Toggle

A cortado bounces brown on check.

#animation #transform #shadow

Live preview Checkboxes

Cosmic Dust Sparkles

Tiny sparkles of cosmic dust shimmer when checked.

#animation #gradient #transform

Live preview Checkboxes

Cowbird Toggle

A cowbird pulses brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Crab Pinch Toggle

A crab scuttles with a red glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Cranberry Toggle

A cranberry shakes red when checked.

#animation #transform #shadow

Live preview Checkboxes

Cricket Toggle

A cricket shakes green when checked.

#animation #transform #shadow

Live preview Checkboxes

Croissant Flaky Toggle

A croissant glows buttery gold when checked.

#animation #transform #shadow

Live preview Checkboxes

Crown Drop In

A crown emoji drops in from above with a bouncy settle when toggled on.

#animation #shadow #transform

Live preview Checkboxes

Crystal Ball Toggle

A crystal ball glows purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Currant Toggle

A currant bounces red on check.

#animation #transform #shadow

Live preview Checkboxes

Cycling Toggle

A bike spins green when checked.

#animation #transform #shadow

Live preview Checkboxes

Daiquiri Toggle

A daiquiri bounces pink on check.

#animation #transform #shadow

Live preview Checkboxes

Darts Toggle

A dartboard spins red when checked.

#animation #transform #shadow

Live preview Checkboxes

Diamond Sparkle

A diamond emoji shimmers with a cyan glow and gentle rotation when toggled on.

#animation #3d #shadow

Live preview Checkboxes

Discus Throw Toggle

A discus bounces blue on check.

#animation #transform #shadow

Live preview Checkboxes

Dog Bark Toggle

A dog face bounces with a brown glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Dolphin Leap Toggle

A dolphin leaps with a cyan glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Dragonfruit Toggle

A dragonfruit bounces pink on check.

#animation #transform #shadow

Live preview Checkboxes

Earwig Toggle

An earwig spins brown when checked.

#animation #transform #shadow

Live preview Checkboxes

Eggplant Glossy Toggle

An eggplant glows purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Egret Toggle

An egret bounces white on check.

#animation #transform #shadow

Live preview Checkboxes

Elderberry Toggle

An elderberry shakes purple when checked.

#animation #transform #shadow

Live preview Checkboxes

Factory Toggle

A factory shakes gray when checked.

#animation #transform #shadow

Live preview Checkboxes

Feather Drift Toggle

A feather drifts with a soft glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Ferry Toggle

A ferry floats in with blue glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Fish Swim Toggle

A fish swims with a blue glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Fishing Toggle

A fishing rod shakes blue when checked.

#animation #transform #shadow

Live preview Checkboxes

Flag Wave Toggle

A flag waves red when checked.

#animation #transform #shadow

Live preview Checkboxes

Flamingo Toggle

A flamingo pulses pink when checked.

#animation #transform #shadow

Live preview Checkboxes

Flea Toggle

A flea pulses red when checked.

#animation #transform #shadow

Live preview Checkboxes

Flicker Toggle

A flicker spins red when checked.

#animation #transform #shadow

Live preview Checkboxes

Flycatcher Toggle

A flycatcher pulses green when checked.

#animation #transform #shadow

Live preview Checkboxes

Frog Jump Toggle

A frog jumps with a green glow when checked.

#animation #transform #shadow

Live preview Checkboxes

Galaxy Spiral Toggle

A galaxy spirals with a violet glow when checked.

#animation #transform #shadow

Effects tagged #animation

Popular tags