LibraryCSSÜcretsiz Saf CSS Efekt Kütüphanesi

#animation CSS efektleri

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

Canlı incele Formlar

Bounce Floating Label

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

#animation #transform #shadow

Canlı incele Formlar

Elastic Floating Label

Label elastically springs up with multiple bounces.

#animation #transform #border

Canlı incele Formlar

Gradient Text Floating Label

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

#animation #gradient #transform

Canlı incele Formlar

Bounce Icon Input

Input whose icon continuously bounces when focused.

#animation #transform #shadow

Canlı incele Formlar

Clock Icon Input

Time input with clock icon that ticks on focus.

#animation #transform #shadow

Canlı incele Formlar

Location Icon Input

Address input with a location pin icon that bounces.

#animation #transform #shadow

Canlı incele Formlar

Phone Icon Input

Phone input with phone icon that vibrates on focus.

#animation #transform #shadow

Canlı incele Formlar

Pulse Icon Input

Input whose icon pulses softly when focused.

#animation #transform #shadow

Canlı incele Formlar

Rotate Icon Input

Input whose icon rotates continuously when focused.

#animation #transform #shadow

Canlı incele Formlar

Date Input with Calendar Icon

Date input with animated calendar icon that bounces on focus.

#animation #transform #shadow

Canlı incele Formlar

Search Input with Loading

Search input that shows a loading spinner when typing.

#animation #transform #shadow

Canlı incele Formlar

Animated Cross Mark Input

Cross X draws itself when input is invalid.

#animation #transform #shadow

Canlı incele Formlar

Error State Input

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

#animation #transform #shadow

Canlı incele Formlar

Invalid Glow Input

Input glows red continuously when invalid.

#animation #shadow #border

Canlı incele Formlar

Invalid Icon Shake Input

Red icon shakes back and forth when invalid.

#animation #transform #shadow

Canlı incele Formlar

Invalid Shake Input

Input shakes horizontally when invalid.

#animation #transform #shadow

Canlı incele Formlar

Invalid Vibrate Input

Input vibrates briefly when content becomes invalid.

#animation #transform #shadow

Canlı incele Formlar

Color Cycling OTP Input

OTP boxes that cycle through colors when focused.

#animation #shadow #border

Canlı incele Formlar

Gradient Border OTP

OTP input wrapped with animated gradient borders.

#animation #gradient #border

Canlı incele Formlar

Color Cycling Radio

Selected radio option cycles through rainbow colors.

#animation #gradient #transform

Canlı incele Formlar

Confetti Radio

Radio option with confetti burst on selection for celebration.

#animation #gradient #transform

Canlı incele Formlar

Heart Radio

Radio styled as heart icon with bounce animation.

#hover #animation #transform

Canlı incele Formlar

Pulse Radio

Radio option pulses with a ring when selected.

#animation #transform #border

Canlı incele Formlar

Ring Expansion Radio

Radio with expanding ring on selection for emphasis.

#animation #transform #border

Canlı incele Formlar

Ripple Radio

Radio with ripple effect emanating from center on selection.

#animation #transform #border

Canlı incele Formlar

Required Asterisk Pulse

Input with a pulsing red asterisk indicating required.

#animation #transform #shadow

Canlı incele Formlar

Required Pulse Input

Required input pulses softly until filled.

#animation #shadow #border

Canlı incele Formlar

Color Cycling Search

Search bar whose border cycles colors on focus.

#animation #transform #shadow

Canlı incele Formlar

Gradient Border Search

Search bar with animated gradient border.

#animation #gradient #transform

Canlı incele Formlar

Search with Loading Spinner

Search bar that shows a loading spinner when typing.

#animation #transform #shadow

Canlı incele Formlar

Mic Search Bar

Search bar with a pulsing mic button on the right.

#hover #animation #transform

Canlı incele Formlar

Gradient Border Select

Select wrapped with an animated gradient border.

#animation #gradient #transform

Canlı incele Formlar

Bounce Slider

Slider whose thumb bounces when dragged.

#animation #transform #shadow

Canlı incele Formlar

Gradient Thumb Slider

Slider with a colorful gradient thumb.

#animation #gradient #transform

Canlı incele Formlar

Pulse Slider

Slider whose thumb pulses with a soft glow.

#animation #shadow #border

Canlı incele Formlar

Rotate Slider

Slider whose thumb rotates while being dragged.

#animation #gradient #transform

Canlı incele Formlar

Error State Input

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

#animation #transform #shadow

Canlı incele Formlar

Focus Ring Input

Input with prominent animated focus ring on selection.

#animation #shadow #border

Canlı incele Formlar

Loading Spinner Input

Input with loading spinner indicating async validation.

#animation #transform #shadow

Canlı incele Formlar

Warning State Input

Input showing warning state with amber border and alert icon.

#animation #shadow #border

Canlı incele Formlar

Aurora Switch

Toggle with aurora-like gradient when active.

#animation #gradient #transform

Canlı incele Formlar

Bounce Switch

Toggle knob bounces in with springy overshoot motion.

#animation #transform

Canlı incele Formlar

Color Cycling Switch

Switch track cycles through rainbow colors when active.

#animation #gradient #transform

Canlı incele Formlar

Elastic Switch

Knob stretches elastically as it slides across track.

#animation #transform

Canlı incele Formlar

Gradient Switch

Switch with animated gradient track that activates when on.

#animation #gradient #transform

Canlı incele Formlar

Pulse Switch

Switch that pulses briefly when toggled on.

#animation #transform #border

Canlı incele Formlar

Pulsing Knob Switch

Toggle knob pulses continuously when active.

#animation #transform #shadow

Canlı incele Formlar

Ring Switch

Toggle that emits an expanding ring on activation.

#animation #transform #border

Canlı incele Formlar

Ripple Switch

Switch with ripple emanating from knob on toggle.

#animation #transform

Canlı incele Formlar

Shine Switch

Switch with light sweep across track when toggled on.

#animation #gradient #transform

Canlı incele Formlar

Spring Switch

Knob springs across track with bounce-back motion.

#animation #transform

Canlı incele Formlar

Aurora Background Input

Input with shifting aurora gradient background.

#animation #gradient #border

Canlı incele Formlar

Animated Gradient Border Input

Input with animated rotating gradient border around it.

#animation #gradient #border

Canlı incele Formlar

Valid Bounce Input

Input bounces once when content becomes valid.

#animation #transform #shadow

Canlı incele Formlar

Animated Check Mark Input

Checkmark draws itself in SVG-style when valid.

#animation #transform #shadow

Canlı incele Formlar

Valid Icon Pop Input

Green icon pops in with elastic bounce when valid.

#animation #transform #shadow

Canlı incele Formlar

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

Canlı incele Hover

BG Water Ripple

Water-like ripple on hover.

#hover #animation #gradient

Canlı incele Hover

Bob Float

Element bobs up and down on hover.

#hover #animation #transform

Canlı incele Hover

Boing Up

Boing-like spring upward on hover.

#hover #animation #transform

Canlı incele Hover

Border Beam Trace

Light beam traces around border on hover.

#hover #animation #gradient

Canlı incele Hover

Border Conic Spin

Conic gradient border spins on hover.

#hover #animation #gradient

Canlı incele Hover

Border Dotted March

Dotted border marches around on hover.

#hover #animation #border

Canlı incele Hover

Border Glow Trace

Glowing dot traces around border on hover.

#hover #animation #gradient

Canlı incele Hover

Border Pulse Glow

Border pulses with glow on hover.

#hover #animation #shadow

Canlı incele Hover

Bounce Diagonal

Bounces diagonally on hover.

#hover #animation #transform

Canlı incele Hover

Bounce Down

Element bounces downward on hover.

#hover #animation #transform

Canlı incele Hover

Bounce Jelly

Wobbly jelly bounce on hover.

#hover #animation #transform

Canlı incele Hover

Bounce Left

Element bounces to the left on hover.

#hover #animation #transform

Canlı incele Hover

Bounce Random

Erratic random bounces on hover.

#hover #animation #transform

Canlı incele Hover

Bounce Right

Element bounces to the right on hover.

#hover #animation #transform

Canlı incele Hover

Bounce Spring

Spring-loaded bounce on hover.

#hover #animation #transform

Canlı incele Hover

Bounce Up

Element bounces upward in a spring motion on hover.

#hover #animation #transform

Canlı incele Hover

Deep Breathe

Deep breathing scale on hover.

#hover #animation #transform

Canlı incele Hover

Breathe Scale

Element breathes in and out on hover.

#hover #animation #transform

Canlı incele Hover

Soft Breathe

Soft breathing animation on hover.

#hover #animation #transform

Canlı incele Hover

Bubbles Burst

Bubbles burst outward on hover.

#hover #animation #shadow

Canlı incele Hover

Bubbles Float

Floating bubbles rise on hover.

#hover #animation #gradient

Canlı incele Hover

Bubbles Rise

Bubbles rise upward on hover.

#hover #animation #gradient

Canlı incele Hover

Bungee Drop

Bungee-cord drop animation on hover.

#hover #animation #transform

Canlı incele Hover

Candle Flame Light

Warm flickering candle glow on hover.

#hover #animation #shadow

Canlı incele Hover

Hue Cycle Fast

Rapidly cycles through hue rotation on hover.

#hover #animation #transform

Canlı incele Hover

Hue Cycle Medium

Medium speed hue rotation cycle on hover.

#hover #animation #transform