LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

#animation CSS efektleri

"animation" etiketiyle eşleşen 3.495 ücretsiz saf CSS efekti. Hepsi kopyala-yapıştır hazır; kullanmak için kütüphane veya derleme adımı gerekmez.

Canlı incele Checkboxes

Wolf Howl Toggle

A wolf howls with a gray glow when checked.

#animation #transform #shadow

Canlı incele Checkboxes

Woodcock Toggle

A woodcock bounces brown on check.

#animation #transform #shadow

Canlı incele Checkboxes

Woodpecker Toggle

A woodpecker shakes red when checked.

#animation #transform #shadow

Canlı incele Checkboxes

Yellowthroat Toggle

A yellowthroat spins yellow when checked.

#animation #transform #shadow

Canlı incele Checkboxes

Zap Energy Toggle

A lightning bolt flickers yellow when checked.

#animation #transform #shadow

Canlı incele Checkboxes

Zebra Stripes Toggle

A zebra shakes with a white glow when checked.

#animation #transform #shadow

Canlı incele Forms

Aurora Background Input

Northern lights aurora gradient background for the input.

#animation #gradient #shadow

Canlı incele Forms

Lava Background Input

Hot lava gradient with crackling orange glow.

#animation #gradient #shadow

Canlı incele Forms

Mesh Gradient Background

Animated multi-color mesh gradient that drifts.

#animation #gradient #shadow

Canlı incele Forms

Stars Background Input

Cosmic starfield background with twinkling dots.

#animation #gradient #shadow

Canlı incele Forms

Animated Dashes Border

Input with a dashed border that marches around on focus.

#animation #shadow #border

Canlı incele Forms

Fire Border Input

Animated fire-effect border using layered gradients.

#animation #gradient #border

Canlı incele Forms

Glow Pulse Border Input

Border glow pulses outward in expanding rings on focus.

#animation #shadow #border

Canlı incele Forms

Glow Ring Border Input

Expanding glow ring radiates outward on focus.

#animation #shadow #border

Canlı incele Forms

Gradient Border Input

Input wrapped with an animated gradient border using padding box trick.

#animation #gradient #border

Canlı incele Forms

Neon Border Input

Cyberpunk-style neon-bordered input that pulses on focus.

#animation #shadow #border

Canlı incele Forms

Pulse Border Input

Border softly pulses with a colored glow when input is focused.

#animation #shadow #border

Canlı incele Forms

Rainbow Border Input

Border continuously cycles through rainbow hues.

#animation #gradient #border

Canlı incele Forms

Rotating Gradient Border

Conic gradient border rotates around the input continuously.

#animation #gradient #transform

Canlı incele Forms

Shimmer Border Input

Border has a traveling shimmer light effect on focus.

#animation #gradient #transform

Canlı incele Forms

Trace Border Input

A glowing trace light travels around the input border on focus.

#animation #gradient #transform

Canlı incele Forms

Bounce Floating Label

Label bounces up with an elastic spring when input is focused.

#animation #transform #shadow

Canlı incele Forms

Color Shift Floating Label

Label transitions through multiple hues when input is active.

#animation #transform #border

Canlı incele Forms

Elastic Floating Label

Label elastically springs up with multiple bounces.

#animation #transform #border

Canlı incele Forms

Gradient Text Floating Label

Label takes on an animated gradient color when input is focused.

#animation #gradient #transform

Canlı incele Forms

Animating Icon Input

Input whose left icon bounces when input is focused.

#animation #transform #shadow

Canlı incele Forms

Bounce Icon Input

Input whose icon continuously bounces when focused.

#animation #transform #shadow

Canlı incele Forms

Clock Icon Input

Time input with clock icon that ticks on focus.

#animation #transform #shadow

Canlı incele Forms

Color Changing Icon Input

Input whose icon cycles through colors on focus.

#animation #transform #shadow

Canlı incele Forms

Location Icon Input

Address input with a location pin icon that bounces.

#animation #transform #shadow

Canlı incele Forms

Phone Icon Input

Phone input with phone icon that vibrates on focus.

#animation #transform #shadow

Canlı incele Forms

Pulse Icon Input

Input whose icon pulses softly when focused.

#animation #transform #shadow

Canlı incele Forms

Rotate Icon Input

Input whose icon rotates continuously when focused.

#animation #transform #shadow

Canlı incele Forms

Date Input with Calendar Icon

Date input with animated calendar icon that bounces on focus.

#animation #transform #shadow

Canlı incele Forms

Search Input with Loading

Search input that shows a loading spinner when typing.

#animation #transform #shadow

Canlı incele Forms

Animated Cross Mark Input

Cross X draws itself when input is invalid.

#animation #transform #shadow

Canlı incele Forms

Error State Input

Input with full error state — red border, X icon, and shake.

#animation #transform #shadow

Canlı incele Forms

Invalid Glow Input

Input glows red continuously when invalid.

#animation #shadow #border

Canlı incele Forms

Invalid Icon Shake Input

Red icon shakes back and forth when invalid.

#animation #transform #shadow

Canlı incele Forms

Invalid Shake Input

Input shakes horizontally when invalid.

#animation #transform #shadow

Canlı incele Forms

Invalid Vibrate Input

Input vibrates briefly when content becomes invalid.

#animation #transform #shadow

Canlı incele Forms

Color Cycling OTP Input

OTP boxes that cycle through colors when focused.

#animation #shadow #border

Canlı incele Forms

Gradient Border OTP

OTP input wrapped with animated gradient borders.

#animation #gradient #border

Canlı incele Forms

Color Cycling Radio

Selected radio option cycles through rainbow colors.

#animation #gradient #transform

Canlı incele Forms

Confetti Radio

Radio option with confetti burst on selection for celebration.

#animation #gradient #transform

Canlı incele Forms

Heart Radio

Radio styled as heart icon with bounce animation.

#hover #animation #transform

Canlı incele Forms

Pulse Radio

Radio option pulses with a ring when selected.

#animation #transform #border

Canlı incele Forms

Ring Expansion Radio

Radio with expanding ring on selection for emphasis.

#animation #transform #border

Canlı incele Forms

Ripple Radio

Radio with ripple effect emanating from center on selection.

#animation #transform #border

Canlı incele Forms

Shake Radio

Radio options shake briefly when selected for tactile feedback.

#animation #transform #border

Canlı incele Forms

Required Asterisk Pulse

Input with a pulsing red asterisk indicating required.

#animation #transform #shadow

Canlı incele Forms

Required Pulse Input

Required input pulses softly until filled.

#animation #shadow #border

Canlı incele Forms

Color Cycling Search

Search bar whose border cycles colors on focus.

#animation #transform #shadow

Canlı incele Forms

Gradient Border Search

Search bar with animated gradient border.

#animation #gradient #transform

Canlı incele Forms

Search with Loading Spinner

Search bar that shows a loading spinner when typing.

#animation #transform #shadow

Canlı incele Forms

Mic Search Bar

Search bar with a pulsing mic button on the right.

#hover #animation #transform

Canlı incele Forms

Gradient Border Select

Select wrapped with an animated gradient border.

#animation #gradient #transform

Canlı incele Forms

Bounce Slider

Slider whose thumb bounces when dragged.

#animation #transform #shadow

Canlı incele Forms

Gradient Thumb Slider

Slider with a colorful gradient thumb.

#animation #gradient #transform

Canlı incele Forms

Pulse Slider

Slider whose thumb pulses with a soft glow.

#animation #shadow #border

Canlı incele Forms

Rotate Slider

Slider whose thumb rotates while being dragged.

#animation #gradient #transform

Canlı incele Forms

Error State Input

Input showing error state with red border, glow and message.

#animation #transform #shadow

Canlı incele Forms

Focus Ring Input

Input with prominent animated focus ring on selection.

#animation #shadow #border

Canlı incele Forms

Loading Spinner Input

Input with loading spinner indicating async validation.

#animation #transform #shadow

Canlı incele Forms

Success State Input

Input showing success state with green border and checkmark icon.

#animation #transform #shadow

Canlı incele Forms

Warning State Input

Input showing warning state with amber border and alert icon.

#animation #shadow #border

Canlı incele Forms

Aurora Switch

Toggle with aurora-like gradient when active.

#animation #gradient #transform

Canlı incele Forms

Bounce Switch

Toggle knob bounces in with springy overshoot motion.

#animation #transform

Canlı incele Forms

Color Cycling Switch

Switch track cycles through rainbow colors when active.

#animation #gradient #transform

Canlı incele Forms

Elastic Switch

Knob stretches elastically as it slides across track.

#animation #transform

Canlı incele Forms

Gradient Switch

Switch with animated gradient track that activates when on.

#animation #gradient #transform

Canlı incele Forms

Pulse Switch

Switch that pulses briefly when toggled on.

#animation #transform #border

Canlı incele Forms

Pulsing Knob Switch

Toggle knob pulses continuously when active.

#animation #transform #shadow

Canlı incele Forms

Ring Switch

Toggle that emits an expanding ring on activation.

#animation #transform #border

Canlı incele Forms

Ripple Switch

Switch with ripple emanating from knob on toggle.

#animation #transform

Canlı incele Forms

Shine Switch

Switch with light sweep across track when toggled on.

#animation #gradient #transform

Canlı incele Forms

Spring Switch

Knob springs across track with bounce-back motion.

#animation #transform

Canlı incele Forms

Aurora Background Input

Input with shifting aurora gradient background.

#animation #gradient #border

Canlı incele Forms

Animated Gradient Border Input

Input with animated rotating gradient border around it.

#animation #gradient #border

Canlı incele Forms

Valid Bounce Input

Input bounces once when content becomes valid.

#animation #transform #shadow

Canlı incele Forms

Animated Check Mark Input

Checkmark draws itself in SVG-style when valid.

#animation #transform #shadow

Canlı incele Forms

Valid Icon Pop Input

Green icon pops in with elastic bounce when valid.

#animation #transform #shadow

Canlı incele Forms

Valid Pulse Input

Input border pulses green when content is valid.

#animation #shadow #border

Canlı incele Hover

Beat Heart

Heartbeat double-thump on hover.

#hover #animation #transform

Canlı incele Hover

BG Aurora Drift

Aurora-like waves drift on hover.

#hover #animation #gradient

Canlı incele Hover

BG Circuit Trace

Circuit lines trace on background on hover.

#hover #animation #gradient

Canlı incele Hover

BG Color Cycle

Background cycles through colors on hover.

#hover #animation

Canlı incele Hover

BG Confetti Fall

Confetti pattern falls on background on hover.

#hover #animation #gradient

Canlı incele Hover

BG Gradient Rotate

Background gradient rotates on hover.

#hover #animation #gradient

Canlı incele Hover

BG Grid Scroll

Grid pattern scrolls on hover.

#hover #animation #gradient

Canlı incele Hover

BG Noise Shimmer

Noise texture shimmers on hover.

#hover #animation #gradient

Canlı incele Hover

BG Pattern Move

Background pattern shifts on hover.

#hover #animation #gradient

Canlı incele Hover

BG Radial Pulse

Radial gradient pulses on hover.

#hover #animation #gradient

Canlı incele Hover

BG Scan Line

Scan line passes over background on hover.

#hover #animation #gradient

Canlı incele Hover

BG Stripe Roll

Diagonal stripes roll on hover.

#hover #animation #gradient

Canlı incele Hover

BG Vignette Pulse

Vignette pulses around edges on hover.

#hover #animation #gradient

Popüler etiketler

#transform5765 #shadow5548 #gradient4959 #border3831 #hover2879 #filter2139 #3d188 #rotate35 #glow21 #switch19 #clip-path9 #glass7 #wave7 #css6 #dots5 #pulse3