Skip to main content Design tokens Components Style utilities
Skip to table of contents

    Transitions

    Transitions make your app more lively and expressive, guiding users through changes and highlighting important elements with fluid animations.

    Internally, we may use other durations like 0.2s and 0.25s in our components with the Web Animations API.

    Design tokenDefault valueExample
    --pc-transition-extra-fast0.1s
    --pc-transition-fast0.15s
    --pc-transition-medium0.3s
    --pc-transition-slow0.5s
    --pc-transition-extra-slow0.75s