Модуль d.10 · Урок 2
Урок 2: AI-анимация интерфейсов
30 мин
Практика
Содержание
- Чему вы научитесь
- Зачем анимации в интерфейсе
- Claude как генератор анимаций
- Промпт для одной анимации
- Промпт для библиотеки анимаций
- Пример результата от Claude
- Итеративная доработка
- AI CSS Animations — без промптов
- Как работать
- Workik — экспорт в разные форматы
- Когда что использовать
- Принципы хороших UI-анимаций
- Тайминг
- Что работает
- Чего избегать
- Доступность: prefers-reduced-motion
- Практическое задание
- Итоги урока
d.10 /
Урок 2 из 4
Чему вы научитесь
- Генерировать CSS-анимации через Claude с итеративной доработкой
- Использовать AI CSS Animations и Workik для быстрых результатов
- Понимать принципы хороших UI-анимаций
- Обеспечивать доступность:
prefers-reduced-motion
Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.
Зачем анимации в интерфейсе
Микро-анимации — не украшение. Они решают конкретные задачи:
- Обратная связь — кнопка «нажалась», форма отправилась, действие выполнено
- Навигация — плавный переход помогает не потерять контекст
- Внимание — пульсация CTA увеличивает клики на 15-25%
- Состояние — загрузка, успех, ошибка — пользователь понимает, что происходит
Проблема: ручное написание CSS/GSAP/Framer Motion требует опыта и часов экспериментов с timing-функциями. AI генерирует рабочий код за секунды и позволяет итеративно дорабатывать.
Claude как генератор анимаций
Claude — самый гибкий инструмент. Вы описываете, что нужно, получаете код, просите исправить — и так до идеального результата. Главное преимущество перед генераторами — диалог.
Промпт для одной анимации
Создай CSS-анимацию для [элемент].
Требования:
- Чистый CSS (без JavaScript)
- Длительность: [N]ms
- Триггер: [hover / scroll / load]
- Стиль: плавный, профессиональный
- Совместимость: Tailwind v4
- Обязательно: @media (prefers-reduced-motion: reduce)
Дай:
1. CSS-код (vanilla + Tailwind-эквивалент)
2. HTML-разметку для примера
3. Комментарии к каждому свойствуПромпт для библиотеки анимаций
Создай 5 микро-анимаций для SaaS-лендинга:
1. Кнопка CTA -- subtle pulse при наведении
2. Карточка фичи -- slide up + fade при скролле
3. Галочка успеха -- SVG рисует себя
4. Tooltip -- fade + scale появление
5. Навбар -- тень при скролле страницы
Для каждой:
- Vanilla CSS (без зависимостей)
- Tailwind-вариант
- @media (prefers-reduced-motion: reduce)
- Комментарий: когда использоватьПример результата от Claude
Пульсация CTA при наведении:
Пульсация кнопки при наведении
Код
На простом языке
/* Subtle pulse -- привлекает внимание к кнопке */
Комментарий: этот эффект мягко выделяет кнопку при наведении курсора
.cta-pulse {
Класс для кнопки призыва к действию (CTA — Call To Action)
transition: transform 0.2s ease, box-shadow 0.2s ease;
transition — плавный переход за 0.2 секунды. Без этого изменения были бы резкими
}
Конец базового стиля кнопки
.cta-pulse:hover {
:hover — стили применяются, когда курсор наведён на кнопку
transform: scale(1.05);
transform: scale — увеличивает кнопку на 5%. Заметно, но не агрессивно
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3);
box-shadow — создаёт мягкое свечение вокруг кнопки (индиго, 30% прозрачности)
}
Конец hover-стиля
/* Tailwind: hover:scale-105 hover:ring-4 hover:ring-indigo-600/30 */
Комментарий: тот же эффект можно записать классами Tailwind прямо в HTML
Нажмите на строку — увидите объяснение
Появление карточки снизу:
Появление карточки снизу
Код
На простом языке
.card-enter {
Класс для карточки, которая появляется с анимацией
opacity: 0;
opacity: 0 — карточка изначально полностью прозрачная (невидимая)
transform: translateY(30px);
translateY(30px) — карточка сдвинута на 30 пикселей вниз от своей позиции
animation: slideUp 0.5s ease-out forwards;
Запускаем анимацию slideUp: 0.5 сек, ease-out (плавное замедление), forwards — остаётся в конечном состоянии
}
Конец стиля карточки
@keyframes slideUp {
@keyframes — описание самой анимации по шагам (здесь только конечная точка)
to {
to — конечное состояние, к которому стремится анимация
opacity: 1;
Карточка становится полностью видимой
transform: translateY(0);
Карточка встаёт на своё место (сдвиг = 0)
}
Конец конечного состояния
}
Конец описания анимации
Нажмите на строку — увидите объяснение
SVG-галочка, которая рисует себя:
SVG-галочка, которая рисует себя
Код
На простом языке
.checkmark-path {
Класс для SVG-линии галочки
stroke-dasharray: 100;
stroke-dasharray — разбивает линию на штрихи длиной 100. Это «нарезает» линию на части
stroke-dashoffset: 100;
stroke-dashoffset: 100 — сдвигает штрихи так, что линия полностью скрыта
animation: draw 0.6s ease-out 0.2s forwards;
Запуск анимации draw: 0.6 сек, с задержкой 0.2 сек (чтобы галочка появилась не сразу)
}
Конец стиля галочки
@keyframes draw {
Описание анимации «рисования» линии
to { stroke-dashoffset: 0; }
Сдвиг штрихов возвращается к 0 — линия плавно «рисуется» от начала до конца
}
Конец анимации. Паттерн dasharray + dashoffset — стандартный трюк для рисующихся SVG-линий
Нажмите на строку — увидите объяснение
Итеративная доработка
После генерации — диалог:
"Сделай pulse медленнее на 30%"
"Добавь задержку 150ms между карточками (stagger-эффект)"
"Замени ease на cubic-bezier(0.34, 1.56, 0.64, 1) для упругости"
"Покажи, как это будет выглядеть с reduced motion"Claude исправляет код в контексте предыдущего разговора. Не нужно описывать всё заново.
AI CSS Animations — без промптов
AI CSS Animations (ai-css-animations.vercel.app) — генератор, который работает через текстовое описание на английском. Бесплатно, без регистрации.
Как работать
Шаг 1. Откройте сайт. Введите описание:
"Button that pulses gently when hovered"
"Card that slides up and fades in on scroll"
"Loading spinner with rotating dots"
"Success checkmark that draws itself"Шаг 2. Нажмите Generate. Получите HTML + CSS с предпросмотром.
Шаг 3. Скопируйте код. Он готов к вставке — поддерживает Tailwind CSS и vanilla.
Инструмент хорош для быстрых результатов. Но нет итеративной доработки — если нужно изменить timing или добавить prefers-reduced-motion, придется делать вручную или через Claude.
Workik — экспорт в разные форматы
Workik (workik.com) генерирует анимации с экспортом в CSS, GSAP, Anime.js и Tailwind. Кастомизация: скорость, easing, задержка.
Когда что использовать
Простая анимация за 30 секунд:
→ AI CSS Animations -- ввёл описание, скопировал код
Нужна итеративная доработка и prefers-reduced-motion:
→ Claude -- диалог, полный контроль
Экспорт в GSAP/Anime.js для сложных сценариев:
→ Workik -- каталог + кастомизация + выбор формата
Анимация SVG (рисование, морфинг):
→ Claude (промпт) или Anime.js через WorkikПринципы хороших UI-анимаций
Тайминг
- 200-500ms для большинства переходов. Короче 200ms — резко, дольше 500ms — тормозит
- Ease-out для появлений: быстро начинается, плавно заканчивается. Пользователь видит результат раньше
- Ease-in для исчезновений: плавно начинается, быстро заканчивается. Элемент не задерживается на экране
Что работает
- Stagger-эффект: карточки появляются с задержкой 50-100ms друг за другом
- Масштабирование на hover: scale(1.02-1.05) — заметно, но не агрессивно
- Fade + translate: появление с небольшим смещением (20-30px) — естественнее, чем просто fade
Чего избегать
- Анимации длиннее 1 секунды раздражают при повторном использовании
- 5+ элементов двигаются одновременно — визуальный хаос
- Bounce/elastic easing на деловых сайтах выглядит несерьезно
- Анимация ради анимации: если не решает задачу (обратная связь, навигация, внимание) — уберите
Доступность: prefers-reduced-motion
12-15% пользователей испытывают дискомфорт от анимаций: вестибулярные нарушения, мигрени, эпилепсия. prefers-reduced-motion — не опция, а обязательное требование.
Отключение анимаций для доступности
Код
На простом языке
@media (prefers-reduced-motion: reduce) {
Проверяем настройку системы: если пользователь включил «Уменьшить движение» — применяем стили ниже
*, *::before, *::after {
* — выбираем ВСЕ элементы на странице, включая псевдоэлементы
animation-duration: 0.01ms !important;
Делаем все анимации мгновенными (почти 0 мс). !important перебивает любые другие стили
transition-duration: 0.01ms !important;
То же для переходов — никаких плавных эффектов. Важно для людей с вестибулярными нарушениями
}
Конец правила для всех элементов
}
Конец медиа-запроса. 12-15% пользователей нуждаются в этой настройке
Нажмите на строку — увидите объяснение
Практическое задание
- Сгенерируйте 3 анимации через Claude:
- Hover-эффект для кнопки CTA
- Появление карточки при скролле
- SVG-галочка, которая рисует себя
- Добавьте
prefers-reduced-motionко всем трем - Сгенерируйте loader через AI CSS Animations
- Включите Reduce motion в настройках OS и проверьте, что всё корректно отключается
- Вставьте одну из анимаций в реальный проект или CodePen
Итоги урока
- Claude — самый гибкий инструмент: промпт, результат, итеративная доработка
- AI CSS Animations — бесплатный генератор для быстрых результатов без регистрации
- Workik — экспорт в GSAP, Anime.js, Tailwind для сложных сценариев
- Тайминг: 200-500ms, ease-out для появлений, ease-in для исчезновений
prefers-reduced-motionобязателен для каждой анимации без исключений