Week 4 · MERN Bootcamp

Chapter 2

Animation & Interaction

Master CSS Transitions, Transforms, and Keyframes.
Learn the theory, practice live code, and reveal detailed explanations for every exercise!

01Transitions + Exercises
02Transforms + Exercises
03Keyframes + Exercises
04Real World + Exercises
01

Transitions

The smoothest way to react to user interaction.

🤔 What Is a Transition?

Without a transition, a CSS property change happens instantly. A transition tells the browser: "don't snap, animate smoothly between these two values."

❌ Without transition
✅ With transition

📝 The Syntax — 4 Parts

transition: background-color 0.3s ease 0s ;
Property
Which CSS property to animate.
Use all to animate everything.
Duration
How long the animation takes.
In seconds (s) or ms.
Timing Function
The speed curve. Controls how
it accelerates/decelerates.
Delay
Wait this long before starting.
Default is 0s.

Click each part above to learn about it.

⏱ Timing Functions — The Speed Curve

Same animation with different timing functions feels completely different. Hover each row or click run:

linear
Same speed start to finish. Spinners.
ease
Slow → Fast → Slow. Default.
ease-in
Slow start, fast end. Exits.
ease-out
Fast start, slow end. Entrances.
ease-in-out
Slow → Fast → Slow (symmetric).
cubic-bezier
Custom spring effect! 🪄

⏳ Transition Delay — Staggered Menus

Delay creates a stagger effect. Hover the menu below:

🏠 Home
📦 Products
📰 Blog
💼 Portfolio
📩 Contact

💻 Section 1 Practice Exercises

Basic Exercise 1.1

Smooth Hover Button

📋 Instructions:
  1. In .ex1-btn, write a transition rule targeting background-color and border-radius.
  2. Set duration to 0.4s and timing function to ease.
  3. Click ▶ Test Code, then hover the button to see it transform smoothly!
Write code and click "Test Code"
✅ Solution Code:
transition: background-color 0.4s ease, border-radius 0.4s ease;
/* OR shorthand: */
transition: all 0.4s ease;
📖 Detailed Explanation:

The transition property specifies which CSS properties should change gradually rather than instantly when a state changes (e.g. :hover). Setting 0.4s defines the duration, and ease provides a smooth acceleration curve.

Intermediate Exercise 1.2

Staggered Card List

📋 Instructions:
  1. Set transition-delay: 0.1s; for .ex2-item:nth-child(2).
  2. Set transition-delay: 0.2s; for .ex2-item:nth-child(3).
  3. Click ▶ Test Code and hover the container to watch cards lift one after another!
Card 1 (0s)
Card 2 (0.1s)
Card 3 (0.2s)
Hover the box to see stagger!
✅ Solution Code:
.ex2-item:nth-child(2) { transition-delay: 0.1s; }
.ex2-item:nth-child(3) { transition-delay: 0.2s; }
📖 Detailed Explanation:

transition-delay pauses the start of a transition by a set duration. Incrementing delays across sibling elements (0s, 0.1s, 0.2s) creates a cascading "stagger" effect without requiring JavaScript.

02

Transforms

Move, rotate, scale, skew — without affecting layout.

⚡ Why Transforms? The Performance Reason

Browser steps: Layout → Paint → Composite. Changing margin or top triggers all 3 — slow. transform triggers Composite only — 60fps GPU acceleration.

Layout
→
Paint
→
Composite
❌ margin-top, width, height
Layout
→
Paint
→
Composite
✅ transform, opacity

🔧 The 4 Transform Functions — Interactive

CSS Box
Live CSS Output
transform: translate(0px, 0px) scale(1) rotate(0deg) skewX(0deg);

🎯 transform-origin — The Pivot Point

rotate(45deg)
transform-origin: center center

💻 Section 2 Practice Exercises

Basic Exercise 2.1

Interactive Card Lift & Grow

📋 Instructions:
  1. Inside .ex3-card:hover, write a transform property.
  2. Combine translateY(-12px) (to move UP 12px) and scale(1.08) (to grow 8%).
  3. Click ▶ Test Code and hover over the card to see the combined motion!
Lift & Scale Me
Hover the card to test!
✅ Solution Code:
transform: translateY(-12px) scale(1.08);
📖 Detailed Explanation:

translateY(-12px) shifts the element upward along the vertical axis (negative values move up). scale(1.08) enlarges the element uniformly by 8%. Combining multiple functions in one transform property executes them smoothly on the GPU.

Intermediate Exercise 2.2

Door Swing Animation

📋 Instructions:
  1. In .ex4-door, set transform-origin: bottom left; to pin the hinge point.
  2. In .ex4-door:hover, set transform: rotate(-30deg);.
  3. Click ▶ Test Code and hover the door to see it swing like a hinge!
🚪 Hover Door
Test your door swing!
✅ Solution Code:
.ex4-door { transform-origin: bottom left; }
.ex4-door:hover { transform: rotate(-30deg); }
📖 Detailed Explanation:

transform-origin changes the pivot coordinates of rotation or scaling. Changing it from default center center to bottom left forces rotation to pivot around the corner, producing a door hinge mechanism.

03

Keyframe Animations

Full control — no user interaction required.

📝 @keyframes — Defining the Steps

0%start
50%middle
100%end

🎛️ The animation Property — All 6 Sub-Properties

animation-name

Name of @keyframes

animation-duration

Length of one cycle

animation-timing-function

Speed curve

animation-iteration-count

Repeats (1, infinite)

animation-direction

normal, reverse, alternate

animation-fill-mode

forwards, backwards, none

💻 Section 3 Practice Exercises

Basic Exercise 3.1

Create a Pulse Animation

📋 Instructions:
  1. Locate the 50% keyframe block in @keyframes pulseEx.
  2. Add transform: scale(1.25); and opacity: 0.6;.
  3. Click ▶ Test Code to watch the ball pulse continuously!
Pulse Ball
Click Test Code to start pulse!
✅ Solution Code:
50% {
  transform: scale(1.25);
  opacity: 0.6;
}
📖 Detailed Explanation:

Keyframes interpolate values across key time percentages. Setting 0%, 100% to scale 1 and 50% to scale 1.25 with dim opacity creates a smooth pulsing heartbeat cycle.

Intermediate Exercise 3.2

Progress Fill with Fill-Mode

📋 Instructions:
  1. In .ex6-bar, write the shorthand animation property.
  2. Pass keyframe name fillProgress, duration 2s, timing ease-out.
  3. Add forwards as fill-mode so the bar stays 100% full when finished.
  4. Click ▶ Run Animation to test!
Click Run Animation!
✅ Solution Code:
animation: fillProgress 2s ease-out forwards;
📖 Detailed Explanation:

By default, animations snap back to their original state (width: 0%) upon completion. animation-fill-mode: forwards retains the computed styles of the last keyframe (width: 100%), keeping the progress bar filled.

04

Real World UI Patterns

Combine transitions, transforms, and keyframes.

🛍️ Product Card & UI Showcase

product

Premium Product

$49.99

💻 Section 4 Practice Exercises

Basic Exercise 4.1

Floating Action Button (FAB)

📋 Instructions:
  1. In .ex7-fab:hover, set background-color: #ef4444; (red).
  2. Add transform: rotate(45deg); to turn the + icon into an × icon.
  3. Click ▶ Test Code and hover the button to see the morphing effect!
Hover the FAB button!
✅ Solution Code:
background-color: #ef4444;
transform: rotate(45deg);
📖 Detailed Explanation:

Rotating a + symbol by 45 degrees transforms it visually into a close × icon. Combining color transition and rotational transform inside hover states creates intuitive UI button feedback.

Intermediate Exercise 4.2

Interactive Shimmer Skeleton

📋 Instructions:
  1. In .ex8-skeleton, add the shorthand animation property.
  2. Set name shimmerEx, duration 1.5s, count infinite, timing linear.
  3. Click ▶ Test Code to see the loading shimmer sweep across the bar!
Click Test Code to see shimmer!
✅ Solution Code:
animation: shimmerEx 1.5s infinite linear;
📖 Detailed Explanation:

Skeleton loaders animate a multi-stop gradient background across an element using background-position. Animating infinitely with linear speed gives a realistic content loading indicator.

🧠

Knowledge Check

Tap each card to reveal the answer.

What are the 4 parts of a transition shorthand?
property · duration · timing-function · delay
Why use transform instead of margin-top?
GPU-accelerated (composite only). margin-top triggers layout + paint (jank).
What does animation-fill-mode: forwards do?
Keeps the element in its final state after animation ends.
Difference between transition and @keyframes?
transition: state-triggered (hover). @keyframes: auto-running, multi-step, looping.