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 APIs:
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 a the actual item as content dynamically loads. Or, use it 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 fade 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 item or items away as it fades the replacement item or items into the same space.
Other resources
See the Using the Animation Library animations sample for code examples that demonstrate the use of the fade animation APIs.
See Guidelines and checklist for fade animations for design best practices in the use of these animations.
Related topics
Build date: 3/5/2013
