Motion
Motion is feedback, never decoration: a hover settles, a menu arrives. Every transition is timed from these tokens,
and under prefers-reduced-motion: reduce they collapse to 1ms in one place, with no
!important and nothing done to your own animation. Looping animation is switched off where it is
declared instead, since a 1ms infinite rotation is a strobe. A build test fails if a component adds an animation
without that guard.
Durations
Point at a row to run its transition. With reduced motion on, they all jump, which is the point.
-
--aihio-duration-feedback150ms Default control feedback transition duration. -
--aihio-duration-feedback-fast100ms Fast hover and menu-item feedback transitions. -
--aihio-duration-overlay200ms Entrance timing for larger blocking overlays. -
--aihio-duration-spinner700ms One full rotation of an indeterminate busy indicator.
Scale
--aihio-duration-fast100ms--aihio-duration-normal150ms--aihio-duration-slow200ms--aihio-duration-spin700ms