Animations

Use the animation library to create web experiences that integrate with Office 365. You can use the animation CSS classes for navigation, panels, dialogs, and more. Animations include directionality (up, down, left, right relating to origin and completion of tasks), enter/exit (fade in, fade out, zoom in, zoom out), and duration (speed of enter/exit relating to urgency or content type).

When choosing a motion for side panels, consider the origin of the triggering element. Use the motion to create a link between the action and the resulting UI. For example, if the triggering element is on the right side of the interface, consider having the panel move in from the right.

When choosing a motion for dialogs, consider the origin and tone of the content. For a warning or error dialog, a quick fade in might be appropriate. If the dialog appears when a user chooses an item to get more information, a scale-up might be appropriate.

CSS Class
Description
Cubic Bezier
Timing
Example (Click to Animate)
Class
ms-u-slideRightIn10
Slide right 10px and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-slideRightIn20
Slide right 20px and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-slideRightIn40
Slide right 40px and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-slideLeftIn10
Slide left 10px and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-slideLeftIn20
Slide left 20px and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-slideLeftIn40
Slide left 40px and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-slideUpIn20
Slide up 20px and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-slideUpIn10
Slide up 10px and fade in
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-slideDownIn20
Slide down 20px and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-slideDownIn10
Slide down 10px and fade in
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-slideRightOut40
Slide right 40px and fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-slideLeftOut40
Slide left 40px and fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-slideUpOut20
Slide up 20px and fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-slideUpOut10
Slide up 10px and fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-slideDownOut20
Slide down 20px and fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-slideDownOut10
Slide down 10px and fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-scaleUpIn100
Scale up to 100% and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.167s
Class
ms-u-scaleDownIn100
Scale down to 100% and fade in
cubic-bezier(0.1, 0.9, 0.2, 1)
0.367s
Class
ms-u-scaleUpOut103
Scale up to 103% and fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-scaleDownOut98
Scale down to 98% and fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-fadeIn100
Fade in
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-fadeIn200
Fade in
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.267s
Class
ms-u-fadeIn400
Fade in
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.367s
Class
ms-u-fadeIn500
Fade in
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.467s
Class
ms-u-fadeOut100
Fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.167s
Class
ms-u-fadeOut200
Fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.267s
Class
ms-u-fadeOut400
Fade out
cubic-bezier(0.1, 0.25, 0.75, 0.9)
0.367s