Движение

Длительности и кривые для того немногого, что движется. Большинство переходов длится 160ms по кривой по умолчанию.

Notifications

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

Переключатель движется на duration-160 и ease-default; скелетон пульсирует на duration-2000 и ease-in-out.

Длительность

Имя — это значение в миллисекундах.

Токен	CSS-переменная	Значение	Для чего
`duration-60`	`--duration-60`	60ms	совсем малое изменение, например полоса диапазона
`duration-120`	`--duration-120`	120ms	эффект нажатия
`duration-160`	`--duration-160`	160ms	по умолчанию: hover, нажатие, цвет, открытие и закрытие, повороты
`duration-200`	`--duration-200`	200ms	появление диалога, выезд шторки
`duration-300`	`--duration-300`	300ms	заполнение индикатора прогресса
`duration-800`	`--duration-800`	800ms	один оборот спиннера
`duration-1000`	`--duration-1000`	1000ms	мигание каретки
`duration-1400`	`--duration-1400`	1400ms	бегущая полоса неопределённого прогресса
`duration-2000`	`--duration-2000`	2000ms	пульс скелетона

Кривые

Токен	CSS-переменная	Значение	Для чего
`ease-default`	`--ease-default`	`ease`	по умолчанию для разовых переходов
`ease-emphasized`	`--ease-emphasized`	`cubic-bezier(0.32, 0.72, 0, 1)`	крупная поверхность встаёт на место: диалог, шторка
`ease-in-out`	`--ease-in-out`	`ease-in-out`	зацикленные анимации, которые плавно «дышат»

Как использовать

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

Учитывайте настройку «уменьшить движение». Компоненты Thykes при prefers-reduced-motion двигаются спокойнее; в своём CSS делайте так же.
Длительности — для движения, а не для ожидания. Задержка перед событием, например перед появлением подсказки, — это не токен движения.