Animating fades (HTML)
Use fade animations to bring items into a view or take them out of a view. There are three types of fade animations: fade in, fade out, and crossfade. Each animation is designed for a different scenario.
This set of animations consists of the following functions:
The following video demonstrates the animations that fade content into and out of view. Note the scroll bar that fades in and out at the bottom of the screen:
The following video demonstrates the crossfade animation:
Fade in
Use the fade in animation to bring an item or set of items into place. An example of the fade in animation can be seen in the app bar, where new controls can appear as the result of user interaction. You should also use the fade in animation to transition from a placeholder item to the actual item as content dynamically loads, or to show a custom tooltip or dialog control.
Note that the Windows tooltip and dialog controls include the fade in and fade out animations.
Fade out
Use the fade out animation to remove an item or set of items from view. An example of the fade out animations can be seen in transient controls such as the scroll bar or panning indicator, which are faded out after a period of time has elapsed and no user input has been detected.
Crossfade
Use the crossfade animation to perform an in-place replacement of an existing item with an incoming item. The animation fades the existing items away as it fades the replacement items into the same space.
Other resources
For code examples that demonstrate the use of the fade animation functions, see the HTML animation library sample.
For design best practices in the use of these animations, see Guidelines and checklist for fade animations.