The Placer Toolkit alpha has
arrived! 🎉
Plenty of changes are coming your
way—some big, some breaking, some
even nuclear! Beware the changelog…
Transitions
Transitions can make interactions more lively and emphasise the relationship between a user’s action and its outcome.
Duration#
Placer Toolkit uses different transition durations to make it easy to track a component’s state while minimising sluggish or distracting movement.
Properties that change between frequent, incidental states, such as hover and focus generally use faster transitions than properties that change between states that are more intentional and impactful, like checked or open.
| Design token | Default value | Example |
|---|---|---|
--pc-transition-extra-fast | 0.1s | |
--pc-transition-fast | 0.15s | |
--pc-transition-medium | 0.3s | |
--pc-transition-slow | 0.5s | |
--pc-transition-extra-slow | 0.75s |
Internally, we may use other durations like 0,2 s and 0,25 s in our components with the Web Animations API, but is generally not used in standard CSS.