Animation

Site level animation speeds are provided using CSS variables to maintain consistency across different components. These variables control the duration of various animations throughout your project. As with other values, these can be overridden according to your sites preference.

Animations should relate to the scale of the moving object, such that large objects should move slower than small objects.

--duration-speed-none

0s

--duration-speed-quick

0.1s

--duration-speed-default

0.2s

--duration-speed-slow

0.3s

Play Animations