Animation is used to create a consistent and delightful experience across the design system. The system uses a set of tokens for transition duration and easing.
Every token is prefixed with --dds-, use the variants concated with the base name to get the token value. Example: --dds-transition-x-slow or --dds-easing-ease-in-out.
Transition duration is used to define the time it takes to change from one state to another.
Hover over the boxes to see the transition duration.
Transition easing is used to define the speed curve of the transition effect.
Hover over the boxes to see the transition function.