← Back to Gallery

🎨 CSS Animation Library

60+ production-ready effects — scroll, hover, glassmorphism, reveals

60+ effects

✨ Entrance / Fade Effects

Fade In CSS

animation: fadeIn 0.6s

Fade In Up CSS

fadeInUp 0.6s

Fade In Down CSS

fadeInDown 0.6s

Fade In Left CSS

fadeInLeft 0.6s

Fade In Right CSS

fadeInRight 0.6s

Fade In Scale CSS

fadeInScale 0.6s

📏 Scale & Bounce

Scale Up CSS

scaleUp 0.5s

Scale Down CSS

scaleDown 0.5s

Bounce In CSS

bounceIn 0.7s

Pulse CSS

pulse 2s infinite

Jello CSS

jello 0.8s

➡️ Slide Effects

Slide Up CSS

slideUp 0.5s

Slide Down CSS

slideDown 0.5s

Slide Left CSS

slideLeft 0.5s

Slide Right CSS

slideRight 0.5s

Slide Up Big CSS

slideUpBig 0.6s

🔄 Rotate & Flip

Spin CSS

spin 0.8s

Spin Slow CSS

spinSlow 3s infinite

Flip X CSS

flipX 0.6s

Flip Y CSS

flipY 0.6s

Wobble CSS

wobble 0.8s

Shake CSS

shake 0.5s

👀 Attention Effects

Float CSS

float 3s infinite

Glow CSS

glow 2s infinite

Blink CSS

blink 1.2s

Wave CSS

👋
wave 1s

Shimmer CSS

shimmer 1.8s

Progress Bar CSS

slideRight on fill

Staggered Delay CSS

delay: 0s-0.3s

📜 Scroll Reveal

Reveal Up JS+CSS

.reveal + IntersectionObserver

Reveal Left JS+CSS

.reveal-left

Reveal Right JS+CSS

.reveal-right

Reveal Scale JS+CSS

.reveal-scale

🖱️ Hover Effects

Lift CSS

Hover me ↑

Glow CSS

Hover me ✨

Scale CSS

Hover me 🔍

Border CSS

Hover me 🖼️

Rotate CSS

Hover me 🔄

Skew CSS

Hover me ⤵

Color Shift CSS

Hover me 🎨

Underline CSS

Hover Me
::after scaleX

Blur CSS

Hover me 🌫️

Brightness CSS

Hover me ☀️

🪟 Glassmorphism

Light Glass

blur(12px) 0.04 white

Strong Glass

blur(20px) 0.08 white

Glass Card

glass-card pattern

Gradient Glass

glass-gradient pattern

🔤 Text Effects

Gradient Text CSS

Gradient
background-clip: text

Gold Gradient CSS

Gold
gold gradient

Text Glow CSS

Glow
text-shadow glow

Text Stroke CSS

Stroke
-webkit-text-stroke