Motion

Motion tokens swap to their reduced values under prefers-reduced-motion: reduce, or inside any element with data-nz-motion="reduce". Reduced motion keeps short opacity fades and removes movement. The spring easings are linear() curves generated from spring parameters.

Durations

Token	Default	Reduced
--nz-duration-base	220ms	120ms
--nz-duration-chart-draw	700ms	0ms
--nz-duration-count-up	900ms	0ms
--nz-duration-fade	140ms	120ms
--nz-duration-fast	140ms	0ms
--nz-duration-instant	80ms	0ms
--nz-duration-pulse	2000ms	0ms
--nz-duration-slow	320ms	120ms
--nz-duration-slower	480ms	160ms
--nz-duration-spin	800ms	0ms
--nz-duration-spring	493ms	120ms
--nz-duration-spring-soft	702ms	120ms
--nz-stagger-item	40ms	0ms

Easings

Token	Default	Reduced	Curve
--nz-easing-enter	cubic-bezier(0, 0, 0, 1)	linear
--nz-easing-exit	cubic-bezier(0.3, 0, 1, 1)	linear
--nz-easing-standard	cubic-bezier(0.2, 0, 0, 1)	linear
--nz-easing-spring	linear(0, 0.007 1.5%, 0.027 3.1%, 0.06 4.8%, 0.108 6.7%, 0.211 10%, 0.559 20.2%, 0.658 23.5%, 0.742 26.7%, 0.811 29.8%, 0.868 32.9%, 0.916 36.1%, 0.954 39.4%, 0.985 43%, 1.007 46.9%, 1.022 51.1%, 1.029 55.9%, 1.029 63.7%, 1)	linear
--nz-easing-spring-soft	linear(0, 0.006 1.2%, 0.021 2.4%, 0.083 5.2%, 0.161 7.8%, 0.462 17%, 0.555 20.3%, 0.637 23.6%, 0.706 26.9%, 0.766 30.3%, 0.817 33.9%, 0.86 37.7%, 0.898 42.1%, 0.929 47%, 0.953 52.5%, 0.971 58.7%, 0.991 73.9%, 1)	linear

Distances, scales and effects

Token	Default	Reduced
--nz-distance-float	0.5rem	0rem
--nz-distance-lift	0.25rem	0rem
--nz-distance-reveal	0.75rem	0rem
--nz-scale-enter	0.96	1
--nz-scale-hover	1.02	1
--nz-scale-press	0.98	1
--nz-magnetic-pull	0.375rem	0rem
--nz-tilt-max-deg	6	0

Chart drawCopy Anchor Link

Charts draw in once, when they first render, on --nz-duration-chart-draw (700 ms) with --nz-easing-standard. The draw is pure CSS, so a server-rendered chart with no JavaScript draws too:

• AreaChart and Sparkline (any mark layer with ChartFrame's shared nz-chart-svg class): a clip-path sweep reveals the plot from the start of the x axis to its end (the nz-chart-reveal keyframes).
• BarChart: each bar grows from the baseline, again by clip-path (nz-bar-chart-grow).
• DonutChart: the ring fades in and settles from 92 % of its size (nz-donut-chart-reveal).

Under Reduced motion the token is 0 ms, so the chart renders at once, already drawn: the same clip, size and opacity the 700 ms draw ends on. A browser test checks both in Chromium, Firefox and WebKit. See the draw on the AreaChart, BarChart and DonutChart pages: reload one to watch it again.