Understanding Motion in Fluent Design

Motion is a core component of Fluent Design System, providing depth, continuity, and a sense of direction. It helps users understand how elements relate to one another and guides focus through subtle visual cues.

Key principles of motion:

• Continuity – Seamlessly transition between UI states.
• Delight – Add micro‑interactions that feel natural.
• Perspective – Use depth to convey hierarchy.

Below are examples of recommended motion patterns and when to apply them.

Standard Animation Curves

Fluent Design uses predefined bézier curves to ensure consistency.

Standard: cubic-bezier(0.2, 0, 0, 1)
Accelerate: cubic-bezier(0.4, 0, 0.2, 1)
Decelerate: cubic-bezier(0, 0.8, 0.2, 1)

Practical Implementation

Use the Windows.UI.Composition APIs for native animations on Windows 10+.

var compositor = Window.Current.Compositor;
var animation = compositor.CreateScalarKeyFrameAnimation();
animation.InsertKeyFrame(0f, 0);
animation.InsertKeyFrame(1f, 100);
animation.Duration = TimeSpan.FromMilliseconds(300);
element.StartAnimation("Translation.Y", animation);