Урок 14. Задания
⚡ Кратко
Три задания на движение и четыре вопроса.
Задания
Задание 1. Живая кнопка
Кнопка: плавная смена фона при наведении (150 мс), лёгкое уменьшение при нажатии, видимый фокус. Ни одно из состояний не должно «дёргать» соседние элементы.
Задание 2. Скелетон карточки
Сделайте заглушку карточки товара: картинка, две строки текста и кнопка.
Всё — прямоугольники с animate-pulse. Пропорции должны совпадать
с настоящей карточкой.
Задание 3. Появление уведомления
Опишите анимацию --animate-slide-in: элемент выезжает справа
и проявляется. Примените её к уведомлению. Для пользователей с отключённым
движением анимация должна выключаться.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Какие свойства дешевле всего анимировать?
Вопрос 2
Какая длительность подходит для смены цвета кнопки?
Вопрос 3
Что делает вариант motion-reduce:?
Вопрос 4
Как зарегистрировать собственную анимацию в v4?