Transitions

Control which properties animate and set their timing

Transitions control how quickly a component moves between states created by Backgrounds, Borders, Effects, Filters, Transforms, and other hover-aware controls.

Apply to

Apply to defaults to All.

Option	Animated properties
None	Disables transitions.
All	Animates every property that supports CSS transitions.
Most Common	Animates colour, background, border colour, text decoration, fill, stroke, opacity, shadows, transforms, filters, and backdrop filters.
Colors	Animates colour-related properties only.
Opacity	Animates opacity only.
Shadows	Animates box and text shadows only.
Transforms	Animates transform properties only.

Use Most Common when All causes an unrelated layout property to animate.

Function

Function controls the timing curve and defaults to Ease-in-out.

• Custom — Reveals a Cubic Bezier field.
• Linear — Moves at a constant rate.
• Ease-in — Starts slowly and accelerates.
• Ease-out — Starts quickly and decelerates.
• Ease-in-out — Starts and ends slowly.

Custom Timing Functions

The Cubic Bezier field accepts four comma-separated values: x1,y1,x2,y2. It defaults to:

0.95,0.05,0.795,0.035

The x values must remain between 0 and 1. The y values may extend below 0 or above 1 to create anticipation or overshoot.

This second example overshoots before settling:

0.21,1,1,1.53

The default custom curve starts quickly and ends abruptly.

Values above 1 on the y-axis can create overshoot.

Use Cubic-Bezier.com to experiment visually.

Timing

Duration is measured in milliseconds and defaults to 300. For example:

• 150 feels quick and responsive.
• 300 is the default general-purpose transition.
• 1000 lasts one second.

Delay is measured in milliseconds and defaults to 0.

Function, Duration, and Delay are hidden when Apply to is None.

Configure the Start and End states first, then adjust the transition. A transition cannot create a visual change when both states use the same values.

Transitions UI in Elements

Transition controls determine what animates and how long the change takes.