Welcome to Part 13 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Transitions & Timing Functions.

CSS Transitions allow you to interpolate styles smoothly over a defined duration when an element changes states (like hover, focus, active, or class-toggled states). By defining transition properties, timing functions, and durations, you can avoid abrupt style jumps and create smooth, engaging micro-interactions.

---

Chapter 86: transition Properties

To configure a transition, use these four base properties:

86.1 Transition Property (transition-property)

Defines the name of the CSS property you want to transition:

.btn {
  transition-property: background-color, transform;
}

• Performance Tip: Avoid using the all keyword (e.g. transition-property: all). It forces the browser to monitor and parse every styled characteristic, degrading rendering performance.

86.2 Transition Duration (transition-duration)

Sets the animation time in seconds (s) or milliseconds (ms):

• transition-duration: 0.3s; or 300ms;.

86.3 Transition Delay (transition-delay)

Sets a waiting time before the transition begins:

• transition-delay: 100ms;.

---

Chapter 87: The Transition Shorthand

You can declare all transition properties in a single line:

/* Syntax: transition: [property] [duration] [timing-function] [delay]; */
.card-hover {
  transition: transform 0.3s ease-in-out 100ms;
}

/* Declaring Multiple Transitions separated by commas */
.badge {
  transition: background-color 0.2s linear, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

---

Chapter 88: Timing Functions & Easing Curves

The transition-timing-function property controls the acceleration rate of the transition over its timeline:

  linear:       Constant speed
  ease:         Slow start, fast middle, slow end (Default)
  ease-in:      Slow start, accelerating to end
  ease-out:     Fast start, decelerating to end
  ease-in-out:  Slow start, fast middle, slow end

88.1 Custom Easings with cubic-bezier()

You can define custom timing curves using the cubic-bezier(x1, y1, x2, y2) function, representing coordinates on a Bezier curve:

• Values range from 0 to 1 on the X axis, but can exceed bounds on the Y axis to create bouncing effects:

  .btn-bounce {
    transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  }

88.2 Stepped Transitions with steps()

Divides the transition duration into equal-sized steps (useful for sprite-sheet animations or typing indicators):

• transition-timing-function: steps(4, end); (snaps values abruptly in 4 intervals).

---

Chapter 89: Transition Performance: Layout vs. Compositing

Not all properties transition smoothly. Transitioning layout properties causes laggy animations:

1. Avoid Transitioning: width, height, margin, padding, top, left. These trigger Reflow (layout calculations) on every single frame.
2. Highly Performant: transform (scale, rotate, translate) and opacity. These are GPU-accelerated and skip layout and paint phases entirely.

/* BAD: Laggy layout transition */
.panel {
  transition: left 0.3s ease;
  left: 0;
}
.panel:hover {
  left: -200px;
}

/* GOOD: Hardware-accelerated smooth transition */
.panel-optimized {
  transition: transform 0.3s ease;
  transform: translateX(0);
}
.panel-optimized:hover {
  transform: translateX(-200px);
}

---

Chapter 90: Transitions Practice & Self-Check

90.1 Practice Exercises

1. Exercise 1: Standard Hover Button: Style a button that morphs background color and scale smoothly on hover.

   .btn-smooth {
     background-color: #3b82f6;
     transform: scale(1);
     transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.2, 1, 0.2, 1);
   }
   .btn-smooth:hover {
     background-color: #2563eb;
     transform: scale(1.05);
   }

2. Exercise 2: Stepped Reveal Indicator: Create a simple reveal block that slides in stepped segments.

   .reveal-box {
     width: 100px;
     transform: translateX(0);
     transition: transform 1s steps(5, end);
   }
   .reveal-box:hover {
     transform: translateX(200px);
   }

90.2 Self-Check Questions

1. What is the default transition-timing-function?
   • Answer: ease.
2. Which keyword transitions all animatable properties?
   • Answer: all (but avoid using it for performance reasons).
3. What are the two most performant properties to transition in CSS?
   • Answer: transform and opacity.
4. What coordinate range is allowed on the X-axis for cubic-bezier coordinates?
   • Answer: $0$ to $1$.
5. Why does transitioning margin-top: 10px cause layout stuttering?
   • Answer: It forces browser reflows (recalculating element geometries) on every animation frame.
6. What timing function divides durations into distinct snapping frames?
   • Answer: steps().
7. What parameters define the transition shorthand ordering?
   • Answer: Property, duration, timing-function, delay.
8. What is the difference between ease-in and ease-out?
   • Answer: ease-in starts slow and speeds up; ease-out starts fast and slows down.
9. Does transition-delay run before the hover state style is applied, or before the animation starts?
   • Answer: It delays the start of the animation transition after the hover state is triggered.
10. Can you use negative values in transition-delay?
    • Answer: Yes, negative values cause the transition to start immediately but visually skip ahead in the timeline.