Back to the @keyframes animation guide

Effects using @keyframes

The catalog contains 4,139 effects using @keyframes. The 96 most-viewed examples are shown below. Read the @keyframes animation guide for a complete explanation.

Abalone Shellbtn-abalone

Deep Abyssbg-abyss-deep

De Stijl Mondrianbg-de-stijl-mondrian

Orbit Spiralhover-orbit-spiral

Baguette Sliceloader-baguette-slice

Active / Inactivetoggle-active-inactive

Aurora Curtainbg-aurora-curtain

Aurora Borealisbtn-aurora-borealis

Quiver Hardhover-quiver-hard

Wormhole Tunnelloader-wormhole-tunnel

Savanna Divided Tabstab-savanna-divider

7 Segment Displayloader-7-segment

Color Shift Navbarnav-color-shift

Equalizer Wavetoggle-equalizer-wave

Brown Noisebg-brown-noise-warm

Blink Swaphover-blink

Neon Active Drawer Navbarnav-drawer-neon-active

Marble Topline Tabstab-marble-topline

Terminal Prompttoggle-terminal-prompt

Cassette Rewindbg-cassette-rewind

Chrome Bubblebg-chrome-bubble-reflect

Baroque Damaskbg-damask-baroque-ornate

Thin Film Interferencebg-thin-film-interference

Animated Ocean Wavesbg-waves

Retro Terminal Buttonbtn-retro-terminal

Locked Achievement Cardcard-achievement-locked

Yellowjacket Togglecheck-yellowjacket

Bounce Arrow Dropdownform-dropdown-bounce

Wave Ripple Distorthover-wave-ripple-distort

Billiards Cueloader-billiards-cue

Black Holeloader-black-hole

Elevatorloader-elevator

Cusp Timestamp Feedmq-cusp-timestamps

Drift Quote Pairmq-drift-quotepair

Vertical Tab Gradient Bg Flownav-vtab-gradient-bg-flow

Chess Knighttext-chess-knight

Fade Pulse Deeptext-fade-pulse-deep

Whirl Pooltoggle-whirl-pool

Rivet Downloads Accordionacc-rivet-downloads

Frost Banner Alertalert-frost-banner

Ivory Sticker Alertalert-ivory-sticker

Ridge Underline Alertalert-ridge-underline

Ripple Copy Alertalert-ripple-copy

Tether Bulk Alertalert-tether-bulk

Turbine Camera Alertalert-turbine-camera

Copper Verified Badge Avatarava-copper-verified

Breathe Glow Badgebadge-anim-breathe-glow

Glisten Badgebadge-anim-glisten

Pulse Color Badgebadge-anim-pulse-color

Ripple Badgebadge-anim-ripple

Spring Pop Badgebadge-anim-spring-pop

Caret Typing Badgebadge-anim-typing-caret

BG Fade FX Badgebadge-fx-bg-fade

Confetti Burst FX Badgebadge-fx-confetti-burst

New Pill Badgebadge-new-pill

Abalone Nacrebg-abalone-shell-nacre

Amplifier Pulsebg-amplifier-pulse

Art Deco Fanbg-art-deco-fan

Asteroid Beltbg-asteroid-belt

Beacon Sweepbg-beacon-sweep

Beetle Wing Iridescencebg-beetle-wing-iridescent

Rising Bubblesbg-bubbles

Candle Flame Rowbg-candle-flame-row

Checkered Flagbg-checkered-flag-wave

Cherry Grovebg-cherry-grove

Wind Chime Spinbg-chime-wind-spin

Christmas Tree Lightsbg-christmas-tree-lights

Comet NEOWISEbg-comet-neowise

Cracked Concretebg-concrete-cracked

Cotton Candy Spinbg-cotton-candy-spin

Dandelion Seedsbg-dandelion-seeds

Diagonal Moving Linesbg-diagonal-lines

Dichroic Glassbg-dichroic-glass

Crimson Duskbg-dusk-crimson

Electric Keyboardbg-electric-keyboard

Foggy Forestbg-foggy-forest

Spiral Galaxybg-galaxy

Gradient Shiftbg-gradient-shift

Koch Snowflakebg-koch-snowflake-edge

Tuning Fork Ringbg-tuning-fork-ring

White Noise Snowbg-white-noise-snow

Wormhole Spinbg-wormhole-spin-vortex

Amber Glow Buttonbtn-amber-glow

Binary Stream Buttonbtn-binary

Ocean Tidebtn-ocean-tide

Smoke Driftbtn-smoke

Violet Stormbtn-violet-storm

Bacon Sizzle Togglecheck-bacon

Battery Charge Togglecheck-battery

Espresso Togglecheck-espresso

Pulsar Radio Beamscheck-pulsar

Ripple Burst Checkcheck-ripple

Silverfish Togglecheck-silverfish

Sparkle Twinklecheck-sparkle

Pickup Truck Togglecheck-truck

Stars Background Inputform-bg-stars

Continue exploring

@keyframes animation guide All guides CSS reference