# animation CSS effects

Live preview Checkboxes

Eagle Soar Toggle

An eagle soars with a golden glow when checked.

Live preview Checkboxes

Falcon Toggle

A falcon shakes brown when checked.

Live preview Checkboxes

Fire Ignite Toggle

A dim flame emoji that ignites with a flickering orange glow when toggled on.

Live preview Checkboxes

Fire Truck Toggle

A fire truck shakes in red-orange when checked.

Live preview Checkboxes

Goldeneye Toggle

A goldeneye bounces yellow on check.

Live preview Checkboxes

Red Grape Toggle

Red grapes shake when checked.

Live preview Checkboxes

Grapefruit Toggle

A grapefruit spins pink when checked.

Live preview Checkboxes

Guitar Strum Toggle

A guitar glows amber when checked.

Live preview Checkboxes

Heart Favorite Toggle

A heart icon that fills with a red gradient and pulses when favorited.

Live preview Checkboxes

Joystick Play Toggle

A joystick glows red when checked.

Live preview Checkboxes

Keyboard Type Toggle

A keyboard glows gray when checked.

Live preview Checkboxes

Koala Sleep Toggle

A koala glows with a blue-gray hue when checked.

Live preview Checkboxes

Locust Toggle

A locust pulses brown when checked.

Live preview Checkboxes

Long Drum Toggle

A long drum shakes in orange when checked.

Live preview Checkboxes

Love Eyes Reveal

A plain heart-eyes emoji reveals with a pulsing pink glow and scale when checked.

Live preview Checkboxes

Mangosteen Toggle

A mangosteen pulses purple when checked.

Live preview Checkboxes

Medal Spin Reveal

A medal emoji spins 360 degrees on its Y-axis and shines when awarded.

#animation #3d #shadow

Live preview Checkboxes

Milkshake Toggle

A milkshake shakes pink when checked.

Live preview Checkboxes

Mosquito Buzz Toggle

A mosquito shakes with a gray glow when checked.

Live preview Checkboxes

Motorcycle Toggle

A motorcycle bounces in with cool glow when checked.

Live preview Checkboxes

Ocean Wave Toggle

An ocean wave glows blue when checked.

Live preview Checkboxes

Octopus Ink Toggle

An octopus wiggles with a magenta glow when checked.

Live preview Checkboxes

Palm Tropical Toggle

A palm tree sways green when checked.

Live preview Checkboxes

Parrot Squawk Toggle

A parrot glows with a rainbow hue when checked.

Live preview Checkboxes

Pepper Spice Toggle

A hot pepper flames red when checked.

Live preview Checkboxes

Phone Call Toggle

A phone shakes green when checked.

Live preview Checkboxes

Pina Colada Toggle

A pina colada shakes yellow when checked.

Live preview Checkboxes

Pintail Toggle

A pintail shakes brown when checked.

Live preview Checkboxes

Pool Toggle

A pool ball pulses purple when checked.

Live preview Checkboxes

Rabbit Hop Toggle

A rabbit hops with a pink glow when checked.

Live preview Checkboxes

Raccoon Mask Toggle

A raccoon shakes with a gray glow when checked.

Live preview Checkboxes

Ramen Slurp Toggle

A ramen bowl steams to life with a warm glow when checked.

Live preview Checkboxes

Rugby Ball Toggle

A rugby ball spins brown when checked.

#animation #clip-path #gradient

Live preview Checkboxes

Scanline Checkbox

A bright scan line sweeps down the box and leaves solid colour behind it.

Live preview Checkboxes

Scissors Cut Toggle

Scissors snip with a gray glow when checked.

Live preview Checkboxes

Shark Bite Toggle

A shark shakes with a steel glow when checked.

Live preview Checkboxes

Shine Sparkle Toggle

Sparkles shine with a gold glow when checked.

Live preview Checkboxes

Smoothie Toggle

A smoothie bounces pink on check.

Live preview Checkboxes

Speaker Loud Toggle

A speaker glows cyan when checked.

Live preview Checkboxes

Stadium Toggle

A stadium bounces in green when checked.

Live preview Checkboxes

Sun Brighten Toggle

A dim sun emoji brightens and slowly rotates with a warm yellow glow when checked.

Live preview Checkboxes

Surfing Toggle

A surfer shakes blue when checked.

Live preview Checkboxes

Tanager Toggle

A tanager spins red when checked.

Live preview Checkboxes

Storm Crash Toggle

A thunderstorm shakes yellow when checked.

Live preview Checkboxes

Trumpet Toggle

A trumpet bounces in gold when checked.

Live preview Checkboxes

Turnstone Toggle

A turnstone shakes orange when checked.

Live preview Checkboxes

Twinkle Star Toggle

A star twinkles gold when checked.

Live preview Checkboxes

Woodpecker Toggle

A woodpecker shakes red when checked.

Live preview Checkboxes

Zap Energy Toggle

A lightning bolt flickers yellow when checked.

#animation #gradient #border

Fire Border Input

Animated fire-effect border using layered gradients.

#animation #gradient #border

Rainbow Border Input

Border continuously cycles through rainbow hues.

Animating Icon Input

Input whose left icon bounces when input is focused.

Color Changing Icon Input

Input whose icon cycles through colors on focus.

#animation #gradient #at-property

Property Focus Ring

Focusing the field animates a registered angle so the gradient ring circles it once.

#animation #transform #border

Bounce Radio

Radio indicator bounces in with springy motion on selection.

#animation #transform #border

Ripple Radio

Radio with ripple effect emanating from center on selection.

#animation #transform #border

Shake Radio

Radio options shake briefly when selected for tactile feedback.

Bounce Slider

Slider whose thumb bounces when dragged.

Success State Input

Input showing success state with green border and checkmark icon.

Valid Icon Pop Input

Green icon pops in with elastic bounce when valid.

Bob Buoy

Buoy bobbing on water on hover.

#hover #animation #border

Border Dash March

Dashed border marches around on hover.

Border Glow Trace

Glowing dot traces around border on hover.

Border Rainbow Flow

Rainbow border flows on hover.

Color Shift BG

Background hue rotates continuously on hover.

Split RGB

RGB color channels split on hover.

Confetti Cannon

Confetti cannon blast on hover.

Confetti Fall

Confetti falls on hover.

#animation #hover #border

Cyber Glitch

Cyberpunk RGB-split glitch with rapid clip-path jumps on hover.

Dip Bounce

Dip down then bounce up on hover.

Dust Swirl

Dust swirls around on hover.

Flame Top Edge

Top edge ignites with animated flame gradient on hover.

Embers Float

Floating embers drift up on hover.

Embers Glow

Glowing embers rise on hover.

Fire Flicker

Flickering firelight on hover.

Fire Spark

Fire sparks flicker on hover.

Fireflies Wander

Fireflies wander randomly on hover.

Firelight Glow

Warm firelight ember glow on hover.

Flip 3D Coin

Coin-toss flip on hover.

Aurora Edge Frame

Aurora-like gradient drifts along the edge on hover.

Fast Corner Trace

Single corner accent traces all four corners quickly on hover.

Glitch Corner Frame

Corners glitch and shift on hover.

Laser Zap Frame

Laser beam zaps around the perimeter on hover.

Metallic Sheen Frame

Metallic gradient sheen sweeps the frame on hover.

Rainbow Arc Frame

Rainbow gradient arc traces the frame on hover.

VHS Trace Frame

VHS tracking distortion lines trace the border on hover.

Glow Soft Pulse

Soft pulsing glow halo on hover.

Glow Sparkle Dust

Sparkle dust glints on hover.

Glow Strobe Rapid

Rapid strobe glow flashes on hover.

Hue Cycle Partial

Hue oscillates across a partial range on hover.

Implode In

Implodes inward on hover.

Jelly Wobble

Element wobbles like jelly on hover.

3D Jolt

Quick 3D jolt animation on hover.

Candle Flame

Soft candle flame flickers on hover.