Transition
A CSS transition interpolates changes in a CSS property’s computed value over time when that value changes.
CSS in Depth, Second Edition
The CSS transition property is a shorthand property for specifying animated interpolation, its duration, timing function, and delay.
- How it is used
- Smooths interactive style changes on hover, focus, and JavaScript-controlled elements instead of letting values snap immediately.
- How deep it goes
- Explains shorthand components, timing functions, delays, and worked dropdown edge cases, including transitions that need JavaScript coordination.
- Examples
- Builds a color-changing button, a fading or sliding dropdown, and navigation icons and labels that move on interaction.
- What you can do after
- Build it from scratch to animate interactive CSS states and coordinate dropdown transitions with JavaScript when CSS needs a measured height.
Tiny CSS Projects
A CSS transition is a gradual interpolation between an element's property values over a specified duration.
- How it is used
- Animates changes between defined interaction states, including card reveals, link enlargement, menu opening, and a card flip.
- How deep it goes
- Explains transition declarations through worked CSS interactions and addresses overflow's inability to change gradually.
- Examples
- Uses summary cards, a flipping credit card, and share links that enlarge or open as a menu.
- What you can do after
- Build it from scratch by defining two CSS states, adding a transition, and handling menu overflow with transition events when needed.
Web Design Playground, Second Edition
The CSS transition property specifies animated changes between values of other CSS properties.
- How it is used
- Animates a portfolio image overlay as it appears during hover.
- How deep it goes
- Demonstrates a complete opacity transition rule without detailing transition syntax beyond the example.
- Examples
- Uses before-and-after book restoration images, with an after image fading in over the original.
- What you can do after
- Apply it via CSS to fade an overlay into view when it is hovered.
Read how Web Design Playground, Second Edition explains transition →
D3.js in Action, Third Edition
A CSS transition is a stylesheet-defined interpolation of an element's property values over time when those values change.
- How it is used
- Animates React visualization labels and badges when their transformed positions change.
- How deep it goes
- Defines a 400-millisecond transform transition and explains the SVG-group workaround, but does not detail browser animation internals.
- Examples
- Uses ranking-chart labels and badges that move through a 400-millisecond cubic-bezier transform transition.
- What you can do after
- Apply it via CSS to animate transformed visualization elements with concise, potentially performant code.
Read how D3.js in Action, Third Edition explains transition →
WordPress Power Toolkit: Harness AI to build next-level websites
A transition effect is a CSS-rendered visual change that occurs over time between element states.
- How it is used
- Applies CSS transitions to simple, user-triggered changes between two visual states.
- How deep it goes
- Explains properties, duration, speed, delay, and state changes, but stops short of detailed CSS syntax.
- Examples
- Uses fading, scaling, color changes, rotations, and black text changing to pink italics.
- What you can do after
- Apply it via CSS or YellowPencil to create smooth, simple changes between element states.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains 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.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.