CSS Animation Tutorial

1. Float

The heart gently floats upward and tilts slightly. Perfect for background elements!

@keyframes float {
  0%, 100% { /* Start & End */
    transform: translateY(0) rotate(0deg);
  }
  50% { /* Middle */
    transform: translateY(-30px) rotate(10deg);
  }
}
        

Duration: 3s

Timing: ease-in-out

Repeat: infinite

2. Bounce

A gentle hop up and down. Draws attention to important elements!

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
        

Duration: 1s

Timing: ease-in-out

Repeat: infinite

3. Fade-In

Element appears softly and grows in. Ideal for revealing new content!

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
        

Duration: 1s

Timing: ease-out

Mode: forwards (stays at end)

4. Heart Burst

A spectacular explosion with rotation! The elastic effect makes it extra cool.

@keyframes heart-burst {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}
        

Duration: 0.8s

Timing: cubic-bezier (elastic!)

Effect: Bounce

5. Pulse - Heartbeat

Like a beating heart! Perfect for "Like" buttons or notifications.

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
        

Duration: 1s

Timing: ease-in-out

Repeat: infinite

6. Spin

Continuous 360-degree rotation. A classic for loading spinners!

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
        

Duration: 2s

Timing: linear (constant speed)

Repeat: infinite

7. Wiggle

A playful shaking motion that decays over time. Great for error states or attention-grabbing icons!

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(15deg); }
  30% { transform: rotate(-15deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-10deg); }
  75% { transform: rotate(5deg); }
}
        

Duration: 1s

Timing: ease-in-out

Effect: Decaying oscillation

8. Slide-In

Element slides in from the left while fading in. Perfect for page transitions and list items!

@keyframes slide-in {
  from {
    transform: translateX(-200px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
        

Duration: 0.8s

Timing: ease-out

Effect: Entrance animation

9. Color Shift

Smoothly cycles through a rainbow of colors. Great for decorative elements or mood indicators!

@keyframes color-shift {
  0%   { color: #e74c3c; } /* Red */
  25%  { color: #f39c12; } /* Orange */
  50%  { color: #2ecc71; } /* Green */
  75%  { color: #3498db; } /* Blue */
  100% { color: #e74c3c; } /* Red */
}
        

Duration: 4s

Timing: linear

Effect: Color cycling

10. 3D Flip

A 3D rotation using perspective. Adds depth and dimension to your animations!

@keyframes flip {
  0% {
    transform: perspective(400px)
      rotateY(0deg);
  }
  50% {
    transform: perspective(400px)
      rotateY(180deg);
  }
  100% {
    transform: perspective(400px)
      rotateY(360deg);
  }
}
        

Duration: 2s

Timing: ease-in-out

Effect: 3D perspective

11. Rubber Band

Stretches and squashes like a rubber band! Fun for playful UIs and game-like interactions.

@keyframes rubber-band {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.25, 0.75); }
  40%  { transform: scale(0.75, 1.25); }
  50%  { transform: scale(1.15, 0.85); }
  65%  { transform: scale(0.95, 1.05); }
  75%  { transform: scale(1.05, 0.95); }
  100% { transform: scale(1, 1); }
}
        

Duration: 1s

Timing: ease

Effect: Squash & stretch

12. Jello

A wobbly jello-like effect using skew transforms. Quirky and fun for hover states!

@keyframes jello {
  0%, 100% {
    transform: skewX(0) skewY(0);
  }
  15% {
    transform: skewX(-12deg) skewY(-12deg);
  }
  30% {
    transform: skewX(8deg) skewY(8deg);
  }
  45% {
    transform: skewX(-5deg) skewY(-5deg);
  }
}
        

Duration: 1.5s

Timing: ease

Effect: Decaying skew