Animate

Кога да се използва

/impeccable animate е за интерфейси, които се усещат безжизнени, където промените в състоянието са моментални и резки, където зареждането просто се появява, където потребителят никога не е напълно сигурен, че кликът му е регистриран. Използвайте го, за да добавите малките движения, които комуникират какво се случва: входове, изходи, обратна връзка, преходи между състояния.

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

Как работи

Умението идентифицира статични моменти, които биха се възползвали от движение, след което ги прилага със строга дисциплина:

1. Входове и изходи: елементите се появяват и изчезват с 200 до 300ms избледнявания плюс фино Y или мащабиране, никога layout свойства.
2. Обратна връзка за състояние: посочване, активно, фокус, зареждане, успех - всички комуникират чрез движение вместо чрез внезапни замени.
3. Преходи между изгледи: преходи с общи елементи, когато има смисъл, избледняване-през-в-другия случай.
4. Напредък и зареждане: екрани-скелети, определени ленти, движение, което казва “все още работя”.
5. Намалено движение: всяка анимация има prefers-reduced-motion fallback.

Изглаждането е винаги експоненциално (ease-out-quart, quint или expo), защото реалните обекти се забавят плавно. Без отскачане, без еластичност, без linear за нищо друго освен за индикатори за напредък.

Умението анимира само transform и opacity. Ако установите, че анимирате width, height, top или left, прави грешното нещо. Използвайте grid-template-rows за преходи на височина.

Пробвайте

/impeccable animate the sign-up flow

Типични добавки:

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

Клопки

• Поискване на “повече анимация”. Animate не е копче. Тя добавя там, където движението комуникира, не навсякъде.
• Премахване на fallback-ите за намалено движение. Умението ги добавя автоматично. Не подлежи на договаряне за достъпност.