CSS Animation Effects Showcase

No animations found matching your search.

How to Use These Animations

Integrating these CSS animations into your website is straightforward. Here's a breakdown:

Understanding the Components

Each animation generally consists of two main parts in the CSS:

@keyframes Definition: This block (e.g., @keyframes slideInLeft { ... }) defines the sequence of an animation.
CSS Class Rule: This rule (e.g., .my-element.slide-in-left-anim { ... }) applies the @keyframes. It includes initial styles and the animation property.

Steps to Implement:

Choose an Animation: Use controls to customize. Code snippet updates.

Copy the CSS Code: Includes @keyframes and the CSS class rule.

Example structure:

/* 1. Keyframes Definition */
@keyframes slideInLeft { /* ... */ }

/* 2. CSS Class to Apply */
.your-element.slide-in-left-anim { /* ... */ }

Prepare Your HTML:

<div class="my-cool-box">Animate me!</div>

For "Text Reveal", use a wrapper:

<div class="text-reveal-wrapper">
  <p class="my-revealing-text">Revealing!</p>
</div>

Apply Animation Class in HTML:

<div class="my-cool-box slide-in-left-anim">I slide!</div>

Add CSS to Your Stylesheet.
Customize Further (Optional).

Element Animation Effects

Slide In

Direction: Duration: 1.0s

Slide Out (Exit)

Direction: Duration: 1.0s

Bounce In

Direction: Duration: 1.0s

Flip In

Axis: Duration: 1.0s

Flip Out (Exit)

Axis: Duration: 1.0s

Light Speed In (Horizontal)

Direction: Duration: 1.0s

Light Speed Out (Horizontal Exit)

Direction: Duration: 1.0s

Zoom In

Type/Direction: Duration: 0.7s

Zoom Out (Exit)

Duration: 1.0s

Fade Out (Exit)

Type/Direction: Duration: 1.0s

Rotate Out (Exit)

Direction: Duration: 1.0s

Fade In

Duration: 2.0s

Rotate In

Duration: 1.0s

Roll In

Duration: 1.0s

Jack In The Box

Duration: 1.0s

Hinge (Exit)

Duration: 2.0s

Tada

Duration: 1.0s

Wobble

Duration: 1.0s

Jello

Duration: 1.0s

Jiggle

Duration: 0.6s

Flash

Duration: 1.0s

Rubber Band

Duration: 1.0s

Head Shake

Duration: 1.0s

Fade In Out (Infinite)

@keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.fade-in-out { animation: fadeInOut 3s ease-in-out infinite; }

Heart Beat (Infinite)

@keyframes heartBeat { 0% {transform: scale(1);} 14% {transform: scale(1.3);} 28% {transform: scale(1);} 42% {transform: scale(1.3);} 70% {transform: scale(1);} }
.heartbeat-anim { animation: heartBeat 1.3s ease-in-out infinite; }

On Hover Effects

Flip (on hover)

Direction: Duration: 0.7s

Rotate (on hover, infinite)

Direction: Duration: 2.0s

Color Change (on hover, infinite)

From: To: Duration: 2.0s

Shadow Pop (on hover)

/* This is a transition-based effect (no @keyframes needed here) */
.your-element.shadow-pop-hover {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.your-element.shadow-pop-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.15);
}

Bounce (on hover, infinite)

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.bounce:hover { animation: bounce 0.5s infinite; }

Pulse (on hover, infinite)

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.pulse:hover { animation: pulse 1s infinite; }

Shake (on hover, infinite)

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.shake:hover { animation: shake 0.5s infinite; }

Scale Up (on hover)

.scale { transition: transform 0.3s; }
.scale:hover { transform: scale(1.2); }

Swing (on hover)

@keyframes swing { 20% {transform:rotate3d(0,0,1,15deg);} 40% {transform:rotate3d(0,0,1,-10deg);} 60% {transform:rotate3d(0,0,1,5deg);} 80% {transform:rotate3d(0,0,1,-5deg);} 100% {transform:rotate3d(0,0,1,0deg);} }
.swing { transform-origin: top center; }
.swing:hover { animation: swing 1s; }

Text Animation Effects

Text: Fade In

Duration: 2.0s

Hello, I faded in!

Text: Reveal

Direction: Duration: 0.8s

Revealing Text!

Text: Slide & Focus In

Duration: 1.0s

Focusing In...

Text: Typewriter

Duration: 3.0s

Typing this text...

Text: Pop In

Duration: 1.0s

Pop!

Text: Focus In

Duration: 1.0s

Focus...

Text: Tracking In Expand

Duration: 0.7s

EXPAND

Text: Shadow Drop Center

Duration: 0.4s

Shadow Drop

Text: Blur Out (Exit)

Duration: 1.2s

I will blur out...

Text: Scroll (Marquee)

Direction: Duration: 15s

This text will scroll... A bit more text to make it longer. And even more.

Text: Scroll (Ticker)

Direction: Duration: 10s

Breaking News: CSS is Awesome!

Weather Update: Sunny with a chance of animations.

Sports: Animations win the championship!

Tech: New CSS features announced.

Breaking News: CSS is Awesome!

Weather Update: Sunny with a chance of animations.

Text: Color Pulse (Infinite)

Watch my color change!

@keyframes pulseTextColor { 0% { color: #3498db; } 50% { color: #e74c3c; } 100% { color: #3498db; } }
.pulse-text-anim { animation: pulseTextColor 2s infinite; }

Text: Pulse Shadow (Infinite)

Glowing Shadow

@keyframes pulseTextShadow { 0% { text-shadow: 0 0 4px rgba(52,152,219,0.5); } 50% { text-shadow: 0 0 10px rgba(52,152,219,1); } 100% { text-shadow: 0 0 4px rgba(52,152,219,0.5); } }
.pulse-shadow-text-anim { animation: pulseTextShadow 2s infinite; }

Text: Flicker (Infinite)

Flicker

@keyframes textFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.text-flicker-anim { animation: textFlicker 1.5s infinite; }

Text: Ken Burns Effect (Infinite)

Subtle Zoom & Pan

@keyframes kenBurnsText {
  0% { transform: scale(1) translateX(0) translateY(0); opacity: 0.8; }
  25% { transform: scale(1.02) translateX(-2px) translateY(1px); opacity: 1; }
  50% { transform: scale(1) translateX(1px) translateY(-1px); opacity: 0.8; }
  75% { transform: scale(1.02) translateX(2px) translateY(2px); opacity: 1; }
  100% { transform: scale(1) translateX(0) translateY(0); opacity: 0.8; }
}
.kenburns-text-anim { animation: kenBurnsText 8s ease-in-out infinite; }

Text: Vibrate (Infinite)

Vibrating Text

@keyframes textVibrate {
  0% { transform: translate(0); } 20% { transform: translate(-1px, 1px); }
  40% { transform: translate(-1px, -1px); } 60% { transform: translate(1px, 1px); }
  80% { transform: translate(1px, -1px); } 100% { transform: translate(0); }
}
.text-vibrate-anim { animation: textVibrate 0.3s linear infinite both; }

Text: Gradient Animate (Infinite)

Colorful Gradient

@keyframes textGradientAnimate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.text-gradient-anim {
  background: linear-gradient(to right, var(--text-color), #e74c3c, #3498db, var(--text-color));
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: textGradientAnimate 5s linear infinite;
}