Chapter 15: Transitions

Introduction

Introduces CSS transitions as a way to make value changes feel smooth and draw attention to changes on a page.

• Smooth changes between values: Explain that a CSS transition tells the browser to ease from one value to another when the value changes, such as a link changing color on hover and changing back afterward.
  Why it matters: This is the basic effect behind the transitions discussed in the chapter.
• Purpose of transition motion: Explain how transitions can improve the feel of interaction and draw attention to a change as it happens.
  Why it matters: It gives a reason to use motion beyond making a change look smooth.

Key terms: CSS transition, ease, hover state, transitions, motion

15.1 From here to there

This section explains how CSS transitions respond to property changes, how to configure them, and how to respect a user’s reduced-motion preference.

• Transitions between property values: Explain that when a property value changes on an element with transition styles, the browser can move smoothly between the old and new values rather than switching immediately. Describe how the button example transitions on hover and reverses when hover ends.
  Why it matters: This is the basic behavior you need to recognize before configuring a transition.
• Placement of transition declarations: Justify placing transition properties on the rule that targets the element at all times rather than only on its :hover rule.
  Why it matters: The placement of the declaration determines whether the effect is available in both directions.
• Property selection and duration: Describe how transition-property selects which changing properties transition and how transition-duration sets the time to reach the final value. Distinguish all from a named property, and state that time values need units, even for zero.
  Why it matters: These settings determine what changes visibly transition and how long the effect lasts.
• Shorthand timing and delay: Describe the four kinds of values accepted by the transition shorthand and explain what timing function and delay control. State how separate transitions for different properties can be listed.
  Why it matters: The shorthand lets you configure when a transition starts and how its change unfolds without separate declarations for every setting.
• Reduced motion accommodation: Explain why the section recommends checking prefers-reduced-motion and describe the suggested approach of making transitions and animations too brief to notice rather than setting transition to none.
  Why it matters: Respecting a motion preference can reduce discomfort without breaking behavior tied to an effect’s completion.

Key terms: transition-*, :hover, property value, transition-* properties, transitioning in, transitioning out, transition-property, all, transition-duration, seconds

15.2 Timing functions

This section explains how timing functions control the rate of change during a CSS transition and uses a hover demo to compare them.

• Transition timing function behavior: Explain how a timing function affects a transition, distinguishing the motion produced by linear, ease-in, and ease-out.
  Why it matters: Timing functions let you choose whether a transition feels steady, accelerating, or decelerating.
• Position transition performance caution: State the performance caution attached to the demo’s use of the left property.
  Why it matters: The demo makes timing functions visible, but its way of moving the box is not a general performance recommendation.

Key terms: timing function, linear, ease-in, ease-out, transition, left property, absolutely positioning, performance

15.2.1 Custom Bézier curves

This section explains how Bézier curves control transition timing, how to create a custom curve, and how to choose timing functions for different interactions.

• Bézier curve timing: Explain how a Bézier curve represents a transition’s progress over time, including the difference between a linear curve and curves that accelerate or decelerate.
  Why it matters: Reading the curve helps you predict how a transition will feel, not just how long it will last.
• Custom curve control points: Describe how to define a custom cubic Bézier timing function and adjust it using browser DevTools.
  Why it matters: Visual editing makes a custom timing curve easier to tune than guessing its four numbers.
• Timing function choices: Justify when to use linear, decelerating, and accelerating timing functions, while treating these choices as flexible guidelines.
  Why it matters: Choosing timing to match what caused a change can make the interface feel responsive and coherent.

Key terms: Bézier curves, timing functions, linear, acceleration, deceleration, control points, handles, cubic-bezier(), DevTools, decelerating

15.2.2 Steps

This subsection explains how CSS steps() timing functions make a transition jump between discrete values instead of changing smoothly.

• Discrete step timing: Explain how steps() divides a transition into discrete changes, how its step count affects the result, and how start and end determine when each change occurs.
  Why it matters: It lets you predict when a stepped transition will visibly jump rather than move smoothly.

Key terms: steps(), start, end, transition duration

15.3 Non-animatable properties

This section uses a dropdown menu to introduce simple transitions on property changes and gives practical guidance on transition duration before developing the menu’s effects.

• Transitions on changing properties: Explain that a CSS transition can smooth a property change, such as a link’s color changing on hover. Distinguish the dropdown’s existing hover-color transitions from the JavaScript that toggles the menu open and closed.
  Why it matters: It helps you separate the change that triggers an effect from the transition that makes the change look smooth.
• Practical transition durations: Justify the section’s recommended short transition durations, including why frequently seen effects should be quick and why a much slower duration can help during development.
  Why it matters: A transition should make an interface feel responsive, not make users wait for it.

Key terms: transition, transition property, hover, open and closed states, transition duration, hover effects, fades

15.3.1 Properties that cannot be animated

This section explains why some CSS properties cannot be smoothly transitioned and how to check a property’s animation type.

• Discrete and interpolated values: Distinguish properties whose values can be interpolated from properties with discrete values, using display and background-color as examples.
  Why it matters: This helps you tell whether a transition will produce a gradual change or simply switch values.
• Checking property animation types: Describe how to use a property’s MDN Formal Definition to check whether and how it can be animated.
  Why it matters: Checking the property’s definition is more reliable than guessing whether a transition will work.

Key terms: interpolated, discrete, display, background-color, opacity, MDN, Formal Definition, Animation Type

15.3.2 Fading in and out

This subsection shows how to fade a menu in and out while ensuring its transparent, closed state does not block clicks on links behind it.

• Opacity and click interception: Explain why an opacity transition alone is insufficient for closing the menu.
  Why it matters: A menu that looks closed can still interfere with the page.
• Visibility and document flow: Distinguish visibility from display and explain why visibility works for this menu.
  Why it matters: Visibility can make the closed menu stop interfering without disrupting the timing of its fade.
• Fade timing in both directions: Trace the different opacity and visibility timing used when the menu closes and opens.
  Why it matters: The different delays allow a smooth fade while leaving the closed menu out of the way.

Key terms: opacity, fully transparent, visibility, display, transition-delay, document flow, absolute positioning, transition delay, fade-in, fade-out

15.4 Transitioning to auto height

This section explains why a dropdown cannot transition directly between zero height and auto height, then uses JavaScript to supply a measured height while CSS handles the animation.

• Auto height transition limit: Explain why a dropdown set to transition between height: 0 and height: auto opens and closes without animating.
  Why it matters: This explains why the seemingly natural CSS-only approach does not produce a sliding effect.
• Measured dropdown height: Describe how the dropdown uses its measured content height to slide open and returns to zero height to slide closed.
  Why it matters: Measuring the rendered content lets the dropdown slide without guessing a fixed open height.
• CSS and JavaScript roles: Justify using JavaScript to determine the height while leaving the transition itself to CSS.
  Why it matters: Keeping the motion in CSS avoids manually reproducing transition behavior in JavaScript.

Key terms: height, auto, overflow, scrollHeight, is-open class, CSS, JavaScript, easing

15.5 Transitioning custom properties

This section explains how registering a custom property with @property lets the browser transition its values and validate them against a declared syntax.

• Registered custom property transitions: Explain why a custom property does not transition by default and how @property gives the browser the type information needed to interpolate its values.
  Why it matters: It explains why changing a custom property may not produce the transition you expected.
• Registration descriptors and validation: Describe the three aspects an @property rule declares and what happens when a value does not match its syntax.
  Why it matters: Registration also helps catch incorrectly typed values, not just enable transitions.
• Custom property syntax forms: Describe how quoted syntax definitions can specify a type, alternative values, lists, or any value, and explain the transition limitation of some complex syntaxes.
  Why it matters: These forms let you choose how restrictive a custom property’s accepted values should be.

Key terms: custom property, @property, data type, interpolate, syntax, inherits, initial value, type safety, |, +

15.6 Summary