Transitions and Animations

🎬 CSS Transitions & Animations: Making Things Move Like Magic!

Imagine you have a toy car. You push it, and it zooms across the floor. But what if it could start slow, speed up, and then gently stop? That’s what CSS transitions and animations do for things on websites!

Think of it like being a movie director 🎥 — you tell your website elements exactly HOW to move, WHEN to move, and for HOW LONG!

🚗 Transition Properties: Teaching Your Car to Drive Smoothly

When you push a door, it doesn’t instantly teleport from closed to open. It swings smoothly! Transitions make your website elements move smoothly too.

The 4 Magic Controls

Think of a remote control with 4 buttons:

Simple Example

.button {
  background: blue;
  transition-property: background;
  transition-duration: 0.3s;
}

.button:hover {
  background: red;
}

When you hover, the button smoothly changes from blue to red in 0.3 seconds!

The Shortcut Way

Instead of writing 4 lines, use ONE:

.button {
  transition: background 0.3s ease 0s;
}
/* property | duration | timing | delay */

Multiple Properties

Want EVERYTHING to animate? Use all:

.card {
  transition: all 0.5s ease;
}

Or list specific ones:

.card {
  transition:
    background 0.3s ease,
    transform 0.5s ease;
}

🎢 Easing Functions: The Speed of Your Roller Coaster

Imagine a roller coaster 🎢:

• ease — Starts slow, speeds up, slows down at end (most natural!)
• linear — Same speed the whole time (like a boring escalator)
• ease-in — Starts slow, ends fast (rolling downhill!)
• ease-out — Starts fast, ends slow (car braking)
• ease-in-out — Slow start AND slow end (very smooth)

graph TD
    A["🚀 Start"] --> B{Which Easing?}
    B --> C["ease: Natural feel"]
    B --> D["linear: Constant speed"]
    B --> E["ease-in: Slow start"]
    B --> F["ease-out: Slow end"]
    B --> G["ease-in-out: Both slow"]

Example

/* Button flies in fast, lands softly */
.fly-in {
  transition: transform 0.5s ease-out;
}

🎨 Cubic-Bezier: Create Your Own Roller Coaster!

The built-in easings not enough? Make your own!

cubic-bezier(x1, y1, x2, y2) has 4 numbers that control the “curve” of your animation.

Think of it like bending a flexible stick 🪄:

• Numbers between 0 and 1 = normal bending
• Numbers above 1 = BOUNCY!
• Numbers below 0 = Goes backward first!

Popular Custom Easings

/* Bouncy! Overshoots then settles */
.bouncy {
  transition: all 0.6s
    cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Super snappy start */
.snappy {
  transition: all 0.3s
    cubic-bezier(0.4, 0, 0.2, 1);
}

Understanding the Numbers

Pro Tip: Use cubic-bezier.com to visually create your curves!

🎬 @keyframes: Directing Your Own Movie Scenes!

Transitions go from A to B. But what if you want A → B → C → D?

@keyframes lets you create a whole MOVIE with multiple scenes!

Simple Example: Bouncing Ball

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

This says:

• Scene 1 (0%): Ball at normal position
• Scene 2 (50%): Ball jumps UP 100px
• Scene 3 (100%): Ball back down

Using Keywords

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

from = 0%, to = 100%

Complex Example: Rainbow Glow

@keyframes rainbow {
  0%   { background: red; }
  25%  { background: yellow; }
  50%  { background: green; }
  75%  { background: blue; }
  100% { background: red; }
}

🎮 Animation Properties: The Control Panel

Now you have your movie (@keyframes). Time to PLAY it!

The 8 Animation Controls

Example: Forever Bouncing Ball

.ball {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

The Shortcut (Animation Shorthand)

.ball {
  animation: bounce 1s ease infinite;
}
/* name | duration | timing | count */

Cool Directions

/* Goes forward then backward */
.swing {
  animation: swing 2s ease infinite alternate;
}

/* Plays backward */
.rewind {
  animation: grow 1s ease reverse;
}

Fill Mode Magic

/* Stays at final position when done */
.fade-in {
  animation: appear 1s ease forwards;
}

/* Starts at first keyframe position */
.delayed {
  animation: slide 1s ease 2s backwards;
}

🎪 Multiple Animations: The Grand Circus!

Why have ONE performer when you can have a WHOLE CIRCUS?

Running Multiple Animations

Separate them with commas:

.circus-star {
  animation:
    spin 2s linear infinite,
    glow 1s ease-in-out infinite alternate,
    bounce 0.5s ease infinite;
}

This element:

1. 🔄 Spins continuously
2. ✨ Glows in and out
3. 🏀 Bounces up and down

All at the SAME TIME!

Example: Dancing Button

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

@keyframes shimmer {
  0% { box-shadow: 0 0 5px gold; }
  100% { box-shadow: 0 0 20px gold; }
}

.magic-button {
  animation:
    pulse 1s ease infinite,
    shimmer 1.5s ease infinite alternate;
}

Timing Each Animation Differently

.complex {
  animation:
    slide 1s ease forwards,
    fade 0.5s ease 0.5s forwards,
    grow 2s ease 1s forwards;
}

Here:

• slide starts immediately
• fade starts at 0.5s
• grow starts at 1s

graph TD
    A["0s: slide starts"] --> B["0.5s: fade joins"]
    B --> C["1s: grow joins"]
    C --> D["All dancing together!"]

🏆 Quick Summary

🌟 Your Animation Superpowers

Now you can:

• ✅ Make buttons glow when touched
• ✅ Create bouncing balls
• ✅ Build rainbow color effects
• ✅ Design loading spinners
• ✅ Animate anything you imagine!

Remember: Start simple, experiment, and have FUN! Every great animator started by making a box move across the screen. 🎬✨