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

Byzantine Mosaic

Byzantine gold mosaic on text.

#animation #gradient #filter

Live preview Text

Cadenza Solo

Virtuosic solo cadenza on text.

#animation #gradient #transform

Live preview Text

Cards Shuffle

Shuffling playing cards on text.

#animation #transform #shadow

Live preview Text

Carnival Mask

Mardi Gras carnival mask on text.

#animation #gradient #shadow

Live preview Text

Cathedral Gothic

Gothic cathedral dark stone on text.

#animation #shadow #filter

Live preview Text

Chess Bishop

Chess bishop on diagonal on text.

#animation #transform #shadow

Live preview Text

Circus Tent

Circus striped tent on text.

#animation #gradient #transform

Live preview Text

Cloud Puff Drift

Puffy clouds drifting slowly across text.

#animation #transform #shadow

Live preview Text

Color Shift Cycle

Animated color hue shift cycle.

#animation #transform #filter

Live preview Text

Color Wheel Spin

Color wheel spinning hue rotation.

#animation #transform #filter

Live preview Text

Compass Needle

Compass needle pointing direction on text.

#animation #transform #shadow

Live preview Text

Concert Hall

Grand concert hall on text.

#animation #gradient #shadow

Live preview Text

Cranberry Tart

Tart red cranberry on text.

#animation #transform #shadow

Live preview Text

Cymbal Crash

Loud cymbal crash burst on text.

#animation #transform #shadow

Live preview Text

Daffodil Trumpet

Yellow daffodil trumpet cup on text.

#animation #gradient #transform

Live preview Text

Dark Matter

Mysterious dark halo around faintly glowing text.

#animation #shadow

Live preview Text

Decrescendo Fade

Fading decrescendo volume on text.

#animation #transform #shadow

Live preview Text

Dew Drop

Glistening dewdrop sliding down text.

#animation #transform #shadow

Live preview Text

Drift Sideways

Text drifting gently sideways like a leaf.

#animation #transform

Live preview Text

Drizzle Light

Light gentle drizzle over text.

#animation #gradient #shadow

Live preview Text

Edwardian Elegant

Edwardian elegant cream on text.

#animation #gradient #shadow

Live preview Text

Event Horizon

Dark ring of no return surrounding text.

#animation #gradient #transform

Live preview Text

Fade In Slow

Slow fade in animation.

#animation

Live preview Text

Fade Pulse

Text slowly fading in and out like a heartbeat.

#animation

Live preview Text

Fire Text

Text painted with a flickering fire gradient in warm reds and yellows.

#gradient #animation #shadow

Live preview Text

3D Flip Card

Text flipping in 3D space like a card.

#animation #transform #3d

Live preview Text

Glow Pulse Text

Soft pulsing glow ring around text that breathes in and out.

#animation #glow #shadow

Live preview Text

Ivy Climb

Climbing ivy vines on text.

#animation #transform #shadow

Live preview Text

Jitter Shake

Text jittering with a chaotic shake pattern.

#animation #transform

Live preview Text

Leo Lion

Majestic maned Leo lion zodiac sign.

#animation #gradient #shadow

Live preview Text

Lotus Tranquil

Tranquil pink lotus on water text.

#animation #gradient #transform

Live preview Text

Mist Haze

Soft misty haze over distant text.

#animation #transform #shadow

Live preview Text

Neon Flicker Text

Layered text shadows imitate a neon sign whose tubes stutter before settling.

#animation #shadow #neon

Live preview Text

Neptune Blue

Deep blue ice giant Neptune.

#animation #gradient #shadow

Live preview Text

Noon Blaze

Blazing midday sun over text.

#animation #shadow #filter

Live preview Text

Outline Draw

A bright outline draws across the text from left to right and resets.

#animation #clip-path

Live preview Text

Paprika Red

Red paprika spice on text.

#animation #gradient #shadow

Live preview Text

Pearl Shimmer

Iridescent pearl shimmer with soft pastel shifts.

#animation #gradient

Live preview Text

Peony Lush

Lush full pink peony on text.

#animation #gradient #transform

Live preview Text

Pine Evergreen

Deep evergreen pine on text.

#animation #gradient #shadow

Live preview Text

Quasar Beam

Brilliant quasar beam sweeping across bright text.

#animation #gradient #shadow

Live preview Text

Rainbow Wave Bounce

Each letter cycles through rainbow hues while bouncing in a sine wave.

#animation #transform #wave

Live preview Text

Red Giant Star

Swollen red giant star slowly expanding.

#animation #transform #shadow

Live preview Text

Mask Reveal Text

Color slides in from left to reveal the text with a clip-path mask wipe.

#animation #clip-path

Live preview Text

Rhythm Pulse

Steady rhythm pulse on text.

#animation #transform #shadow

Live preview Text

Roman Column

Roman fluted column on text.

#animation #gradient #shadow

Live preview Text

3D Y Rotation

Text rotating around the Y axis in 3D.

#animation #transform #3d

Live preview Text

Rotate Spin

Text rotating 360 degrees continuously.

#animation #transform

Live preview Text

Rotate Y Yaw

Y-axis yaw rotation animation.

#animation #transform

Live preview Text

Saturate Pop

Text color pops between muted and fully saturated.

#animation #filter

Live preview Text

Violent Shake

Text shakes violently for a brief moment then pauses, on a loop.

#animation #transform #rotate

Live preview Text

Shake Vertical Rattle

Vertical rattle shake motion.

#animation #transform

Live preview Text

Slice Reveal

A colored copy of the text splits into top and bottom halves sliding apart.

#animation #transform #clip-path

Live preview Text

Sphere Shaded

Text filled with a radial highlight gradient giving a spherical metallic look.

#gradient #animation #shadow

Live preview Text

Strawberry Red

Sweet red strawberry on text.

#animation #gradient #transform

Live preview Text

Sustain Ring

Long sustained ringing note on text.

#animation #shadow #filter

Live preview Text

Treble Clef

Curving treble clef over text.

#animation #transform #shadow

Live preview Text

Treble Tinkle

High treble tinkle on text.

#animation #transform #shadow

Live preview Text

Tremor Hard Seismic

Hard seismic tremor motion.

#animation #transform

Live preview Text

Tulip Cup

Cup-shaped tulip gradient on text.

#animation #gradient #transform

Live preview Text

Typewriter Line

Characters appear one step at a time behind a blinking block cursor.

#animation #border #typewriter

Live preview Text

Vibrate Fast Buzz

Fast buzzing vibration motion.

#animation #transform

Live preview Text

Vibrate Slow Hum

Slow humming vibration motion.

#animation #transform

Live preview Text

Water Ripple

Text with a watery ripple distortion effect.

#animation #gradient #transform

Live preview Text

Wave Bounce Letters

Letters rise and fall in a smooth traveling wave.

#animation #transform #wave

Live preview Text

White Dwarf

Dense, hot white dwarf with intense glow.

#animation #shadow #filter

Live preview Text

Willow Weep

Weeping willow branches on text.

#animation #transform #shadow

Live preview Text

Zenith Peak

Bright peak point directly overhead in text.

#animation #gradient #filter

Live preview Text

Zoom In

Text zooming in from far distance.

#animation #transform

Live preview Tooltips

BG Aurora

Tooltip with aurora gradient background above the trigger.

#hover #animation #gradient

Live preview Tooltips

Flash Strobe

Tooltip that flashes with a strobe-like opacity animation.

#hover #animation #transform

Live preview Tooltips

Orbit Circles

Tooltip with orbiting circles decoration above the trigger.

#hover #animation #transform

Live preview Tooltips

Progress Circular

Tooltip with circular progress indicator above the trigger.

#hover #animation #transform

Live preview Tooltips

Pulse Throb

Tooltip that throbs with a gentle pulse animation on hover.

#hover #animation #transform

Live preview Tooltips

Shimmer Wave

Tooltip with a shimmering wave gradient sweeping across.

#hover #animation #gradient

Live preview Tooltips

Tada Success

Success tooltip celebrates with a tada animation above the trigger.

#hover #animation #transform

Live preview Tooltips

Zig Zag

Tooltip that zigzags into view above the trigger.

#hover #animation #transform

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

Dash Career Timeline

Sprint seasons stack as track lanes and the newest runner leans further down the straight.

#animation #transform #sport

Live preview Timelines

Lagoon Thumbnail Timeline

Every entry carries a small gradient frame whose light drifts on its own beat.

#thumbnail #gradient #animation

Live preview Timelines

Mica Growing Timeline

The mica rail redraws itself downward on a loop and each dot pops in behind it.

#animation #keyframes #list

Live preview Timelines

Reef Habit Week

A week of habit dots per row, with today's column ringed and pulsing.

#habit #grid #animation

Live preview Timelines

Spindle Reading Series

Three spindle speed samples grow into columns above a dashed limit line.

#chart #animation #bars

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 Toggles

Binary Flow

Binary digits stream across the track as data flows.

#animation #gradient #transform

Live preview Toggles

Butterfly / Cocoon

Cocoon bursts open into a fluttering butterfly.

#animation #gradient #transform

Live preview Toggles

Cobalt Streak

Cobalt blue streak with lightning glow.

#animation #gradient #transform

Live preview Toggles

Cog Mesh

Two interlocking cogwheels rotate together when engaged.

#animation #gradient #transform

Live preview Toggles

Flap / Still

Flapping wing knob goes still on the amber track.

#animation #transform #shadow

Live preview Toggles

Focused / Distracted

Target stays centered when focused, scatters when distracted.

#animation #transform #shadow

Live preview Toggles

Fog Roll

Thick fog rolls across the eerie track obscuring the knob.

#animation #gradient #transform

Live preview Toggles

Graphite Pulse

Graphite dark with pulsing inner glow.

#animation #gradient #transform

Live preview Toggles

Harmony / Dissonance

Knob jitters with a chaotic animation when dissonance is on.

#animation #transform #shadow

Live preview Toggles

Hologram Glitch

Cyan hologram knob glitches with chromatic aberration.

#animation #gradient #transform

Live preview Toggles

Manual / Auto

Hand-crank knob shifts to a spinning gear for auto mode.

#animation #transform #shadow

Effects tagged #animation

Popular tags