Animating (HTML)

  • Article

Animations add beauty, energy, motion and personality to your apps. Learn how to create animations that are fast and fluid.

Dependent and independent animations

Conceptually, an animation can be thought of as a process that updates a numeric property, such as opacity or the spacial position of an element, at regular timed intervals according to an interpolation function. When the UI thread updates a property value, this type of animation is called a dependent animation.

For dependent animations to have a smooth and consistent appearance, the UI thread must not be interrupted so that it can update the animated properties at regular time intervals. Any interruptions to the UI thread, such as raising and handling Document Object Model (DOM) events, executing code, or updating the DOM in response to layout changes could cause the animations to glitch or stutter because the UI thread is busy doing other work.

Windows Store apps using JavaScript enable certain types of animations to be offloaded from the UI thread to a separate, hardware-accelerated system thread. This offloading creates smoother animations because it ensures that the animations are not blocked by the actions in the UI thread. This type of animation is called an independent animation. The next few sections tell you how you can add independent animations to your Windows Store app using JavaScript.

Use the Windows Animation Library

The Windows Library for JavaScript provides an Animation Library, built on Cascading Style Sheets, Level 3 (CSS3) standards, that is engineered to deliver high-performance, smooth animations that have a consistent look and feel with other Windows animations. This library supports many common animation scenarios, such as animating the first view of the app and creating state and content transitions. We recommend using the Animation Library animations whenever possible.

For more info about using the Animation Library, see Animating your UI.

Use CSS3 Transitions and Animations

To create an animation that's not provided by the Animation Library, we recommend using CSS3 transitions and animations. Some properties can be independently animated. You can use CSS3 transitions and animations to independently animate non-layout properties like these:

  • The transform property (translation, rotation, and skew of 2-D and 3-D transforms)
  • opacity

The UI thread doesn't have to perform work, such as a layout pass, when these properties change.

For example, rather an animating the CSS left property you should use the CSS transform translateX function to move your element so that your animation is independent. Although both approaches achieve the same visual effect, the left and top properties can't be animated independently because changing them triggers a layout pass, and operations that trigger a layout pass can't be offloaded to the graphics processing unit (GPU).

Place independent animations in front

We recommend that you move your independently animated elements in front of other elements. You can do this by:

  • Giving your independent animating elements a high z-index
  • Using non-negative z-indexes for independently animating elements
  • Not overlapping your independent animation with other elements

Use infinite animations carefully

Most animations execute for a specified amount of time. But CSS3 supports the ability to set the iteration count of an animation to infinite, which causes the animation to run indefinitely. We recommend minimizing the use of infinite animations because they continually consume CPU resources and can prevent the CPU from going into a low power or idle state, potentially causing it to run out of power more quickly.

When hiding infinite animations set Cascading Style Sheets (CSS) display property to "none" to stop the animation and reduce CPU usage. This approach is useful when hiding HTML progress controls. Do not set the CSS visibility property to "hidden" to hide your infinite animations. Doing so lets the animation continue to run and consume resources.

Don't toggle the CSS visibility property

When hiding UI, don't toggle the CSS visibility property to "hidden" then back to "visible". Doing so causes the element to be composed/animated on the UI thread instead of being independently animated.

Do not animate extremely large surfaces and limit number of animating elements

Be aware of the number of elements that you're animating and their sizes. Independent animations are limited by the system's GPU. If you animate too many elements or too large a surface area, your animations fall back to the dependent UI thread.