Guidelines for fade animations

Applies to Windows and Windows Phone

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.

Dos and don'ts

  • When your app transitions between unrelated or text-heavy elements, use a fade out followed by a fade in instead of a crossfade. This allows the outgoing object to disappear completely before the incoming object is visible. Crossfading lots of text, in particular, is not recommended.
  • Use the crossfade animation to transition between elements of different sizes or when you refresh a large area. In the middle of the animation, both the incoming and outgoing elements will be semitransparent and the background will be visible to the user. Note that programming languages used with Extensible Application Markup Language (XAML) do not contain a dedicated crossfade animation. In those languages, you can achieve the effect by using the fade in and fade out animations with overlapped timing.
  • Fade in the incoming element or elements on top of the outgoing elements, if the elements' size remains constant and you want the user to feel that they're looking at the same item. You can fade in the incoming item on top of the outgoing item. Then, once the fade in is complete, the outgoing item can be simply removed. Of course this is only a viable option when the outgoing item will be completely covered by the incoming item. This method also prevents the background from becoming visible during the transition.
  • Don't use fade animations to add or delete items in a list. Use the list animations created specifically for that purpose.
  • Don't use fade animations to change the entire contents of a page. Use the page transition animations created specifically for that purpose.

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
Guidelines for swipe animations
For developers (HTML)
HTML animation library sample
Animating your UI
Animating fades
fadeIn
fadeOut
crossFade
For developers (XAML)
Animating your UI
Animating fades
Quickstart: Animating your UI using library animations
FadeInThemeAnimation
FadeOutThemeAnimation

 

 

Show:
© 2014 Microsoft