Animate

/impeccable animate

Good fit

• Интерфейсы кажутся безжизненными или резкими при смене состояний.
• Загрузка, обратная связь или переходы нуждаются в анимации, объясняющей, что происходит.
• Вам нужна дисциплинированная анимация с fallback'ами для reduced-motion.

Когда использовать

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

Не используйте для добавления bouncing или elastic-эффектов ради энергии. Это украшение, и этот навык вам его не даст.

Как это работает

Навык определяет статические моменты, которым поможет анимация, и применяет её со строгой дисциплиной:

1. Появление и исчезновение: элементы появляются и уходят с 200–300ms fade плюс лёгкое Y- или scale-смещение, никогда свойства макета.
2. Обратная связь по состоянию: hover, active, focus, загрузка, успех — всё показывает через анимацию вместо внезапных переключений.
3. Переходы между видами: shared-element-переходы, где это имеет смысл, fade-through в остальных случаях.
4. Прогресс и загрузка: скелетон-экраны, полоски прогресса, движение, которое говорит «всё ещё работаю».
5. Reduced motion: у каждой анимации есть fallback prefers-reduced-motion.

Easing всегда экспоненциальный (ease-out-quart, quint или expo), потому что реальные объекты плавно замедляются. Никакого bounce, elastic или linear ни для чего, кроме индикаторов прогресса.

Навык анимирует только 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’ов reduced-motion. Навык добавляет их автоматически. Это обязательно для доступности.

Related commands

• Delight