beta

Motion Animations, transitions, easings, and durations.

Here's a sample playground to test our animation, transition, duration, and easing tokens.

Controls

Iteration FOR TESTING PURPOSES ONLY. Some animations work best as a transition and other work best as an infinite loop. See Token documentation for use cases.

Infinite 1

Animation Animation / Transition. NOTE: the fade-in* options will only work on an element that has a semi-transparent starting opacity.

Easing Default is a fallback curve determined by the animation type.

Duration Arranged from fastest to slowest. Default is a fallback length determined by the animation type.

Combinations Jump to heading

You can combine the animation tokens to create some cool effects:

<dialog style="animation: var(--prs-animation-fade-out), var(--prs-animation-scale-down);">
  <!-- ... -->
</dialog>

Guidance Jump to heading

COMING SOON

tag/element ⇢ animation-token(s)
When using {element} make sure to use {token(s)} for transitioning in and {token(s)} for transition out.

IN OUT

--prs-animation-* --prs-animation-*