Animate

Коли використовувати

/impeccable animate призначений для інтерфейсів, які здаються неживими, де зміни станів миттєві та різкі, де завантаження просто з’являється, де користувач ніколи не довіряє, що його клік зареєстровано. Використовуйте його, щоб додати малі рухи, які комунікують, що відбувається: входи, виходи, зворотний зв’язок, переходи між станами.

Не використовуйте його для додавання підстрибувань або пружин заради енергії. Це декорація, і ця навичка не дасть вам її.

Як це працює

Навичка ідентифікує статичні моменти, які б виграли від руху, а потім застосовує їх зі строгою дисципліною:

1. Входи та виходи: елементи з’являються та зникають з fade-ами 200-300ms плюс тонкий Y або scale, ніколи властивості макета.
2. Зворотний зв’язок стану: hover, active, focus, loading, success — всі комунікують через рух замість раптових замін.
3. Переходи між видами: shared-element переходи, де це має сенс, fade-through в інших випадках.
4. Прогрес та завантаження: скелетні екрани, детерміновані смужки, рух, що каже “ще працюємо”.
5. Зменшений рух: кожна анімація має fallback prefers-reduced-motion.

Easing завжди експоненціальний (ease-out-quart, quint або expo), оскільки реальні об’єкти плавно сповільнюються. Без підстрибування, без пружин, без лінійного для чогось, окрім індикаторів прогресу.

Навичка анімує лише transform та opacity. Якщо ви виявили, що анімуєте width, height, top або left, вона робить щось не те. Використовуйте grid-template-rows для переходів висоти.

Спробуйте

/impeccable animate the sign-up flow

Типові додавання:

• Поле email отримує свічення фокусу на focus-visible (opacity + shadow, 180ms)
• Кнопка відправки показує спінер всередині себе в стані завантаження, а не окремий спінер поруч
• Екран успіху входить з opacity + translateY(8px), 260ms, ease-out-quart
• Повідомлення про помилку сповзає вниз з grid-template-rows (не height), 220ms
• @media (prefers-reduced-motion: reduce) fallback для кожного переходу

Підводні камені

• Запит “більше анімації”. Animate — це не шкала. Він додає рух там, де він комунікує, не всюди.
• Видалення fallback-ів для зменшеного руху. Навичка додає їх автоматично. Необговорене для доступності.