Fade in

As explained in CSS in Depth, Second Edition

A fade-in transition gradually increases an element's visual opacity as it changes into its visible state.

A fade-in transition gradually reveals an element by increasing its visual opacity. In a navigation menu, labels can remain hidden until hover, then appear alongside a translated “fly in” effect. section 16.2

Use the technique when:

• A compact menu should expose labels only when the user hovers over it. section 16.2
• A visual reveal should work with another transition or transform rather than appearing instantly. section 16.2

Figure 16.5 The menu icons on the left will feature several transforms and transitions.

Inspect the menu illustration to see how the icon navigation uses transitions and transforms to reveal its labels. section 16.2

How CSS in Depth, Second Edition covers it

How deep it goes

Demonstrates the interaction pattern and pairs it with translation, but does not provide the label-transition declaration.

Examples

Uses hidden menu labels that appear on hover beside enlarged icons and translated link text.

What it assumes

Assumes familiarity with CSS navigation markup, hover interaction, transitions, and transforms.

What you can do after

Build it by combining a hidden navigation label with a fade-in transition and a translate effect.

How it connects

Connects transitions with transforms, hover states, navigation menus, and responsive design.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyondAn animation technique that increases opacity over time until content becomes fully visible.

Compare how 2 books explain fade in →

Related concepts

• requestAnimationFrameuses · requestAnimationFrame is a browser API method that schedules a callback to run before the next screen repaint.
• closureuses · A closure is a function or callable value together with access to bindings from the lexical environment in which it was created.
• promiseuses · A JavaScript Promise is an object representing the eventual completion or failure of an asynchronous operation and its resulting value or reason.
• translate functionused by · The CSS translate() transform function moves an element along one or more spatial axes without changing its layout dimensions.

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