Fade in
A fade-in is an animation technique that gradually increases an element’s opacity until it becomes fully visible.
CSS in Depth, Second Edition
A fade-in transition gradually increases an element's visual opacity as it changes into its visible state.
- How it is used
- Reveals navigation labels during hover interaction while keeping the compact menu visually restrained.
- 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 you can do after
- Build it by combining a hidden navigation label with a fade-in transition and a translate effect.
Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond
An animation technique that increases opacity over time until content becomes fully visible.
- How it is used
- Transitions newly painted canvas images into view by increasing their opacity over time.
- How deep it goes
- Explains alpha-based redraws, recursive animation frames, a .99 stopping threshold, and promise-based completion.
- Examples
- Uses a canvas image gallery and code that increases alpha by one twenty-fourth of the remaining opacity.
- What you can do after
- Build a canvas image fade using globalAlpha and requestAnimationFrame, and signal completion with a promise.
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.
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.