Transitions

Transition tokens make interactions feel more lively and help users understand the relationship between their action and its outcome.

Mouse over or focus the preview swatches below to see each token in action.

Duration

Cornerstone uses different transition durations to make it easy to track a component’s state while minimizing sluggish or distracting movement.

Properties that change between frequent, incidental states (like hover) typically use faster durations than properties that change between intentional states (like opening a menu or checking a box).

Custom Property	Description	Preview
--cs-transition-fast	Fast duration for frequent, incidental state changes like hover and focus
--cs-transition-normal	Standard duration for typical state changes
--cs-transition-slow	Slow duration for intentional, impactful state changes like opening a panel or checking a box

Easing

Easing controls the standard transition-timing-function used for transitions throughout Cornerstone.

Custom Property	Description	Preview
--cs-transition-easing	Timing function (transition-timing-function) used for all Cornerstone transitions