Motion

Durations and easing curves for the few things that move. Most transitions take 160ms on the default curve.

Notifications

<tk-switch>Notifications</tk-switch>
<tk-skeleton shape="text" lines="2" style="inline-size: 160px"></tk-skeleton>

The switch moves on duration-160 and ease-default; the skeleton pulses on duration-2000 and ease-in-out.

Duration

The name is the value in milliseconds.

Token	CSS variable	Value	Use for
`duration-60`	`--duration-60`	60ms	a very small change, such as a range band
`duration-120`	`--duration-120`	120ms	a press effect
`duration-160`	`--duration-160`	160ms	the default: hover, press, color, open and close, rotations
`duration-200`	`--duration-200`	200ms	a dialog appearing, a sheet sliding in
`duration-300`	`--duration-300`	300ms	a progress bar filling
`duration-800`	`--duration-800`	800ms	one turn of a spinner
`duration-1000`	`--duration-1000`	1000ms	a caret blink
`duration-1400`	`--duration-1400`	1400ms	an indeterminate progress sweep
`duration-2000`	`--duration-2000`	2000ms	a skeleton pulse

Easing

Token	CSS variable	Value	Use for
`ease-default`	`--ease-default`	`ease`	the default for one-off transitions
`ease-emphasized`	`--ease-emphasized`	`cubic-bezier(0.32, 0.72, 0, 1)`	a large surface settling in: a dialog, a sheet
`ease-in-out`	`--ease-in-out`	`ease-in-out`	looping animations that breathe in and out

Using them

.my-panel {
  transition: opacity var(--duration-160) var(--ease-default);
}
@media (prefers-reduced-motion: reduce) {
  .my-panel { transition: none; }
}

Respect reduced motion. Thykes components calm their motion under prefers-reduced-motion; do the same in your own CSS.
Durations are for motion, not for waiting. A delay before something happens, such as a tooltip's show delay, is not a motion token.