Share via


Animating fades (XAML)

Use fade animations to bring items into a view or take items 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. The XAML animation library implements these animations using FadeInThemeAnimation and FadeOutThemeAnimation.

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  

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 fade in and fade out animations simultaneously 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.

Fade animations in default Windows Runtime control behavior

Other resources

See Guidelines and checklist for fade animations for design best practices in the use of these animations.

For a sample that uses HTML rather than XAML, see Using the Animation Library animations sample.

Animating your UI

Quickstart: Animating your UI using library animations

FadeInThemeAnimation

FadeOutThemeAnimation

XAML personality animations sample