Animation Tokens

Animation tokens define the duration and easing of animations used throughout the design system.

Token	Value	Description
--forge-animation-duration-short1	50ms	The shortest duration, for near-instant feedback.
--forge-animation-duration-short2	100ms	A short duration for quick exits and small state changes.
--forge-animation-duration-short3	150ms	A short duration for hover, press, and other small interaction feedback.
--forge-animation-duration-short4	200ms	A short duration and the most commonly used, for small transitions that should feel responsive.
--forge-animation-duration-medium1	250ms	A medium duration for elements entering the screen.
--forge-animation-duration-medium2	300ms	A medium duration for fades and transitions of moderately sized elements.
--forge-animation-duration-medium3	350ms	A medium duration for transitions that cover a moderate area.
--forge-animation-duration-medium4	400ms	The longest medium duration, for expanding and collapsing content.
--forge-animation-duration-long1	450ms	A long duration for larger transitions.
--forge-animation-duration-long2	500ms	A long duration for larger transitions that cover more of the screen.
--forge-animation-duration-long3	550ms	A long duration for large, deliberate transitions.
--forge-animation-duration-long4	600ms	The longest long duration, for slow, deliberate motion.
--forge-animation-duration-extra-long1	700ms	An extra long duration for ambient or large-scale motion.
--forge-animation-duration-extra-long2	800ms	An extra long duration for ambient or large-scale motion.
--forge-animation-duration-extra-long3	900ms	An extra long duration for ambient or large-scale motion.
--forge-animation-duration-extra-long4	1000ms	The longest duration, for ambient or full-screen motion.
--forge-animation-easing-linear	cubic-bezier(0, 0, 1, 1)	Constant speed with no acceleration. Use it for opacity and color changes.
--forge-animation-easing-standard	cubic-bezier(0.2, 0, 0, 1)	The default easing for elements that begin and end at rest.
--forge-animation-easing-accelerate	cubic-bezier(0.3, 0, 1, 1)	Easing for elements that exit, starting slowly and ending quickly.
--forge-animation-easing-decelerate	cubic-bezier(0, 0, 0, 1)	Easing for elements that enter, starting quickly and ending slowly.
--forge-animation-easing-emphasized	cubic-bezier(0.2, 0, 0, 1)	A more expressive version of standard easing, for prominent transitions.
--forge-animation-easing-emphasized-accelerate	cubic-bezier(0.3, 0, 0.8, 0.15)	A more expressive version of accelerate easing, for prominent exits.
--forge-animation-easing-emphasized-decelerate	cubic-bezier(0.05, 0.7, 0.1, 1)	A more expressive version of decelerate easing, for prominent entrances.