How deeply does Web Design Playground, Second Edition cover transition?

Demonstrates a complete opacity transition rule without detailing transition syntax beyond the example.

Transition

As explained in Web Design Playground, Second Edition

The CSS transition property specifies animated changes between values of other CSS properties.

A CSS transition makes a change happen gradually instead of all at once. Think of it as a gentle fade rather than a light switch: when an image overlay changes opacity, the browser animates that change. section 20.5

Fade in an overlay

Set the overlay to start invisible with opacity: 0, then use transition: opacity 1.5s ease. On hover, changing opacity to 1 fades the after image into view over the before image. section 20.5

.image-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 156px;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.image-overlay:hover {
  opacity: 1;
}

This CSS pairs an opacity change with a 1.5-second eased transition, then triggers the visible state on hover. section 20.5

How Web Design Playground, Second Edition covers it

Cover of Web Design Playground, Second Edition

liveBook manning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

CSS in Depth, Second EditionThe CSS transition property is a shorthand property for specifying animated interpolation, its duration, timing function, and delay.
liveBook manning.com

Tiny CSS ProjectsA CSS transition is a gradual interpolation between an element's property values over a specified duration.
liveBook manning.com

D3.js in Action, Third EditionA CSS transition is a stylesheet-defined interpolation of an element's property values over time when those values change.
liveBook manning.com

WordPress Power Toolkit: Harness AI to build next-level websitesA transition effect is a CSS-rendered visual change that occurs over time between element states.

Compare how 5 books explain transition →

Related concepts

CSS transform propertyuses · The CSS transform property applies two-dimensional or three-dimensional geometric transformations, such as translation, rotation, scaling, and skewing, to an element’s rendering.
cubic-bezier()uses · The CSS cubic-bezier() function defines a timing function using a cubic Bézier curve specified by two control points.
keyframes at-rulecontrasts with · The CSS @keyframes at-rule defines an animation’s keyframes, specifying animated property values at points along its timeline.
easinguses · Easing is a function or timing technique that varies an animation or transition’s rate of change over its duration.
CSS animationcontrasts with · CSS animation is a stylesheet-defined change in one or more element properties over time, governed by animation timing rules and often specified with keyframes.
flipping-over effectused by · A flipping-over effect is a visual interaction in which a card or other interface element appears to rotate from one side to the other.

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.