Техзадание на анимацию

Лена работает продуктовым дизайнером в стартапе. Сегодня она отрисовала новый онбординг для приложения — три экрана с плавными переходами и микроанимациями. В Figma всё выглядит отлично, но теперь нужно объяснить разработчику Максиму, как именно должны двигаться элементы.

Обычно в таких случаях Лена пишет в Slack: «Кнопка должна плавно появляться снизу». Максим уточняет: «Как плавно? За сколько миллисекунд? Какой easing?». Начинается переписка на пять сообщений, а в итоге анимация всё равно выглядит не так, как задумывалось.

Проблема

Ты видишь анимацию в голове. Знаешь, как она должна ощущаться. Но перевести это в понятные разработчику параметры — отдельный навык. Нужно указать триггер, длительность, тип кривой, координаты, прозрачность. Иначе получится игра в испорченный телефон.

Как Claude помогает

Шаг 1. Опиши анимацию своими словами, как видишь:

У меня экран онбординга. По центру заголовок и текст. 
Внизу кнопка «Продолжить». 
Когда пользователь заходит на экран, заголовок должен 
плавно появиться сверху, текст — чуть позже с небольшой 
задержкой, а кнопка — выехать снизу с лёгким отскоком.

Шаг 2. Попроси Claude превратить это в техническое ТЗ:

Напиши техзадание на эту анимацию для фронтенд-разработчика.
Укажи триггер, длительность, easing, что и куда движется, 
порядок появления элементов.

💡 Совет: Если работаешь с motion-дизайнером, добавь: «Используй термины After Effects» — Claude адаптирует описание.

Шаг 3. Если нужны конкретные параметры для кода:

Переведи это в CSS-анимацию с transition и transform. 
Используй cubic-bezier для easing.

Что получилось

Claude вернул структурированное ТЗ:

Триггер: загрузка экрана (onMount)

Заголовок: fade in + translateY(-20px → 0), 400ms, ease-out

Текст: fade in, задержка 150ms, 350ms, ease-out

Кнопка: translateY(40px → 0) + scale(0.95 → 1), задержка 250ms, 500ms, cubic-bezier(0.34, 1.56, 0.64, 1) — эффект отскока

А потом — готовый CSS:

.title {
  animation: slideDown 400ms ease-out;
}
.text {
  animation: fadeIn 350ms ease-out 150ms backwards;
}
.button {
  animation: bounceUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 250ms backwards;
}

✅ Результат: Лена скопировала ТЗ в Notion, Максим реализовал анимацию с первого раза. Никаких уточнений. Сэкономили 40 минут на созвонах и правках.

Что забрать с собой

• Описывай анимацию человеческим языком — Claude переведёт в техническую спецификацию
• Уточняй формат вывода: CSS, Lottie, After Effects, Swift — под твой стек
• Используй ТЗ как общий язык с разработчиками и motion-дизайнерами
• Храни шаблоны частых анимаций — переиспользуй с небольшими правками