Windows Dev Center

Guidelines for fade animations

Use fade animations to bring items into a view or to take items out of a view. The two common fade animations are fade-in and fade-out.

Recommendations

  • When your app transitions between unrelated or text-heavy elements, use a fade-out followed by a fade-in. This allows the outgoing object to completely disappear before the incoming object is visible.
  • Fade in the incoming element or elements on top of the outgoing elements if the size of the elements remains constant, and if you want the user to feel that they're looking at the same item. Once the fade-in is complete, the outgoing item can be removed. This is only a viable option when the outgoing item will be completely covered by the incoming item.
  • Avoid fade animations to add or delete items in a list. Instead, use the list animations created for that purpose.
  • Avoid fade animations to change the entire contents of a page. Instead, use the page transition animations created for that purpose.
  • Fade-out is a subtle way to remove an element.

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

Related topics

For designers
Guidelines for add and delete
Guidelines for content transitions animations
Guidelines for drag animations
Guidelines for edge-based UI animations
Guidelines for page transitions animations
Guidelines for pointer click animations
Guidelines for reposition animations
Guidelines for pop-up UI animations
For developers (XAML)
Animating your UI
Animating fades
Quickstart: Animating your UI using library animations
FadeInThemeAnimation class
FadeOutThemeAnimation class
For developers (HTML)
HTML animation library sample
Animating your UI
Animating fades
fadeIn function
fadeOut function
crossFade function

 

 

Show:
© 2015 Microsoft