Motion
Springs for things that move, curves for things that fade
Durations
Hover the tiles.
fast140msbase220msslow380mspage520msCode
<div class="motion-tile" style="--d: var(--d-fast)"><code>fast</code><small>140ms</small></div>
<div class="motion-tile" style="--d: var(--d-base)"><code>base</code><small>220ms</small></div>
<div class="motion-tile" style="--d: var(--d-slow)"><code>slow</code><small>380ms</small></div>
<div class="motion-tile" style="--d: var(--d-page)"><code>page</code><small>520ms</small></div>Springs
Used by the segmented control, menus and drawers.
Code
<div class="segmented" role="group" aria-label="Demo" data-segmented="motion-demo">
<span class="seg-thumb" aria-hidden="true"></span>
<button type="button" aria-pressed="true" data-value="One">One</button>
<button type="button" aria-pressed="false" data-value="Two">Two</button>
<button type="button" aria-pressed="false" data-value="Three">Three</button>
<button type="button" aria-pressed="false" data-value="Four">Four</button>
</div>Reduce motion
People who turn motion off get instant changes. The customizer has a switch, and the system setting is respected.
Code
<button type="button" class="btn btn-gray" data-bs-toggle="offcanvas" data-bs-target="#customizer" aria-controls="customizer"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Open the customizer</button>