Chapter 17: Animations

Introduction

Introduces keyframe animations as a way to create motion with more defined points than a transition, while noting that animation can provide useful feedback.

• Keyframes Beyond Transitions: Distinguish keyframe animations from transitions by explaining why multiple defined points allow motion that does not simply go from a start state to an end state.
  Why it matters: This explains when a transition is too limited for the motion you want.
• Browser Interpolation Between Keyframes: Explain what a keyframe represents and what the browser does between defined keyframes.
  Why it matters: You specify important points rather than every frame of the motion.
• Meaningful Animation Feedback: State that animations can convey meaningful feedback to users, not just add visual interest.
  Why it matters: It gives a purpose for animation beyond making a page look lively.

Key terms: transition, keyframe animation, keyframe, interpolates, frames, meaningful feedback, animation

17.1 Keyframes

This section shows how to define and apply a CSS keyframe animation, then explains its timing, repetition, and precedence over ordinary styles.

• Keyframe timing and interpolation: Explain how named @keyframes use percentages to specify an element’s appearance over an animation, and what happens when a property is omitted from an intermediate keyframe.
  Why it matters: You can specify important points in an animation without repeating every property at each keyframe.
• Animation definition and application: Distinguish defining an animation with @keyframes from applying it with the animation shorthand, and describe the four settings used in the example.
  Why it matters: Defining keyframes alone does not animate an element; the element must apply the named animation.
• Smoothness across repeated iterations: Explain why a repeated animation can visibly snap at the boundary between iterations and how to avoid that in the animated property.
  Why it matters: A smooth change within one iteration does not guarantee a smooth repeated animation.
• Animated declarations and the cascade: Explain why the box uses its keyframe color during the animation but returns to its regular green color afterward.
  Why it matters: Cascade priority explains why the keyframe colors appear despite a conflicting regular CSS rule.

Key terms: @keyframes, keyframe, background-color, transform, animation, animation-name, animation-duration, animation-timing-function, animation-iteration-count, iteration

17.2 Animating 3D transforms

This section previews building a card layout on the existing page before adding animation.

17.2.1 Building the layout without animations

Build the cards’ responsive layout and styling before adding their 3D fly-in animation.

• Flyin grid and card roles: Distinguish the two modules used for the page content: flyin-grid arranges the items, while each card supplies its own appearance.
  Why it matters: Separating layout from appearance makes each module’s job clear.
• Mobile first card layout: Explain how the cards are laid out on small screens before grid styles are added for larger viewports.
  Why it matters: The cards have a usable small-screen layout without needing the larger-screen grid.
• Responsive grid columns: Explain what grid columns, repeat(), and auto-fit contribute to the larger-screen card layout.
  Why it matters: The larger-screen arrangement adapts its column count without replacing the small-screen layout.

Key terms: flyin-grid, card, module, mobile-first, normal block elements, media query, grid columns, repeat(), auto-fit, breakpoints

17.2.2 Adding animation to the layout

This section adds a 3D fly-in animation to a card layout using shared perspective and staged keyframes.

• Staged card fly-in motion: Trace how translateZ(), rotateY(), and opacity change across the animation’s keyframes to bring the cards in from the distance and turn them toward the viewer.
  Why it matters: Separating the forward movement and rotation across keyframes produces the intended fly-in effect.
• Shared perspective and item animation: Explain where the CSS sets perspective and where it applies the fly-in animation.
  Why it matters: The container provides a common 3D view for the individually animated cards.

Key terms: keyframes, translateZ(), rotateY(), opacity, perspective, flyin-grid container, flyin-grid item

17.3 Animation delay and fill mode

This section shows how to stagger grid-item animations with delays and use fill mode to prevent delayed items from appearing before they animate.

• Staggered animation start times: Explain how different animation-delay values make grid items fly in one after another.
  Why it matters: Different start times create the intended sequence of entrances.
• Fill mode during delays: Explain why delayed items appear and jump before animating, and how animation-fill-mode: backwards fixes this. Distinguish backwards from forwards and explain why this example does not need forwards.
  Why it matters: Fill mode prevents delayed items from appearing in the wrong place before their entrance animations begin.

Key terms: animation-delay, stagger, animation-fill-mode, none, backwards, forwards, both, first frame

17.4 Conveying meaning through animation

This section explains that animation can serve a practical purpose by conveying meaning as part of the user experience.

• Purposeful animation in the experience: Explain why animation need not be merely decorative: when integrated into the experience, it can convey specific meaning about something on the page.
  Why it matters: This gives you a reason to choose animation beyond simply making a page more entertaining.

Key terms: animation, integrated into the experience, convey specific meaning

17.4.1 Responding to user interaction

This section builds a Save-button loading spinner that reassures users while a form waits for a server response.

• Feedback during form submission: Explain why the Save button shows an animation while the application waits for a server response.
  Why it matters: Feedback keeps users from wondering whether the Save button worked.
• Save button loading state: Trace how clicking Save puts the form into its loading state and how a real application could end that state.
  Why it matters: The animation communicates the form’s current state only when that state is applied.
• Centered crescent spinner: Describe how the button’s loading styles create and center its spinner.
  Why it matters: The spinner can replace the label visually without leaving the button’s center.
• Seamless repeated rotation: Explain how the crescent keeps spinning while the button is loading.
  Why it matters: A full-turn loop makes the loading indicator appear continuous.

Key terms: visual indication, loading spinner, preventDefault(), is-loading, disabled, pseudo-element, border radius, color: transparent, negative margins, infinite

17.4.2 Drawing the user’s attention

The section shows how a shaking Save button can unobtrusively remind users to save, and how CSS and JavaScript make the reminder play when typing pauses.

• Animation as a save reminder: Explain why the Save button shakes and why the animation waits for a pause in typing.
  Why it matters: The timing makes the reminder useful rather than intrusive.
• Side-to-side shake keyframes: Describe how the keyframes produce a shake that eases off at the end.
  Why it matters: The keyframe positions determine whether the movement reads as a brief, natural shake.
• Typing pause and animation replay: Trace how the script triggers the shake after typing stops and prepares it to play again.
  Why it matters: Resetting the timer and removing the class make the reminder both unobtrusive and repeatable.

Key terms: shake, Save button, keyframes, translate, shake class, keyup, timeout, animationend

17.5 Scroll-based timelines

This section explains how CSS can tie an animation’s progress to scrolling, how to choose the scroll source and direction, and why browser support limits its use.

• Scroll-linked animation progress: Explain how animation-timeline: scroll() makes an animation follow scrolling rather than simply playing from beginning to end.
  Why it matters: It lets an animation respond directly to a reader’s position on the page without JavaScript.
• Scroll source and direction: Describe the default scroll source and how arguments to scroll() can select another source or scrolling direction.
  Why it matters: These arguments determine which scrolling movement controls the animation.
• Browser support limitation: Explain why the section recommends restricting scroll-driven animations to decorative enhancements for now.
  Why it matters: An unsupported animation should not prevent readers from using the page.

Key terms: animation-timeline, scroll(), scroll-driven animation, scroll(nearest), scroll(root), scroll(self), block, inline, x, Firefox

17.6 One final piece of advice

The section encourages readers to keep developing their CSS skills through curiosity, experimentation, and learning from others.

• Continuing CSS exploration: Explain how to keep learning CSS after finishing the book: experiment with combinations of tools, inspect impressive pages with DevTools, and learn from developers and designers as new features emerge.
  Why it matters: Experimenting and investigating real pages can help you keep improving as CSS changes.

Key terms: DevTools, CSS features

17.7 Summary