Условие
В файле style.css уже есть синяя карточка
.card с текстом «Привет» и красный бейдж
.badge с текстом «NEW».
Нужно добавить две разные анимации:
- карточка появляется снизу с лёгким «пружинным» движением и поворотом;
- бейдж пульсирует бесконечно (увеличивается и уменьшается).
HTML менять не нужно. Итог сверьте со вкладкой «Результат», затем нажмите Проверить.
Что в HTML — какой класс за что отвечает
Разметка уже готова во вкладке index.html. Работайте только в style.css.
-
.cardсиняя карточка с текстом «Привет» -
.badgeкрасный бейдж NEW внутри карточки
Что нужно сделать
-
Создайте
@keyframes cardInс тремя кадрами:-
0%—opacity: 0,transform: translateY(40px) scale(0.9) rotate(-8deg)(карточка ниже, меньше и чуть повёрнута); -
60%—opacity: 1,transform: translateY(-8px) scale(1.04) rotate(2deg)(лёгкий «отскок» вверх); -
100%—opacity: 1,transform: translateY(0) scale(1) rotate(0deg)(обычное положение).
-
-
У
.cardдобавьте:animation: cardIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both.1.2s— длительность появления;cubic-bezier(0.22, 1, 0.36, 1)— «пружинное» ускорение;0.2s— задержка перед стартом;both— до старта держать кадр 0%, после конца оставить кадр 100%.
-
Создайте
@keyframes badgePulse:-
0%и100%—transform: scale(1); -
50%—transform: scale(1.15).
-
-
У
.badgeдобавьте:animation: badgePulse 1.4s ease-in-out 1.4s infinite.1.4s— длительность одного пульса;1.4s(вторая цифра) — задержка, чтобы пульс начался после появления карточки;infinite— повторять без остановки.
Подсказка для новичка
Сначала напишите @keyframes cardIn и подключите его к
.card.
Потом отдельно сделайте badgePulse для
.badge.
Это две независимые анимации: у карточки — разовое появление, у бейджа — бесконечный пульс.
Если запутались в значениях — откройте блок «Дополнительная информация» ниже.
Стартовый код
В редакторе слева уже есть внешний вид body,
.card и
.badge.
Вам нужно дописать два блока
@keyframes
и два свойства
animation.
Сверьте с вкладкой «Результат» и нажмите Проверить.
Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Карточка появляется с отскоком · бейдж NEW пульсирует
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница прямо сейчас.
- Результат — эталон: появление карточки и пульс бейджа.
- Описание задачи — полное условие с точными значениями (эта вкладка).
- Задание — короткий чеклист шагов внизу.
- Помощник — подставит куски решения по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — вернуть стартовый шаблон.
Зачем эта задача
Вы учитесь запускать несколько анимаций сразу: одна на родителе (карточка),
другая на дочернем элементе (бейдж). Важно не перепутать имена
cardIn и
badgePulse
и правильно указать задержки.
Что уже есть в style.css
body— отступ 40px, тёмный фон, шрифт Arial..card— ширина 180px, синий фон, белый жирный текст по центру..badge— красный бейдж NEW (inline-block, мелкий шрифт).
Эти стили трогать не нужно. Добавляйте только анимации.
Анимация карточки cardIn
Блок @keyframes описывает кадры.
Потом свойство animation на
.card запускает эти кадры.
opacity— прозрачность (0 = не видно, 1 = видно).translateY— сдвиг вверх/вниз.scale— размер.rotate— поворот в градусах.-
cubic-bezier(0.22, 1, 0.36, 1)— кривая, из‑за которой движение кажется «пружинным», а не линейным. -
both— до старта применить стили кадра 0% (карточка сразу «спрятана»), после конца оставить кадр 100%.
Анимация бейджа badgePulse
- Бейдж то чуть увеличивается (
scale(1.15)), то возвращается кscale(1). ease-in-out— плавный разгон и торможение.-
Задержка
1.4sнужна, чтобы пульс начался уже после появления карточки (карточка крутится 1.2s + задержка 0.2s ≈ 1.4s). infinite— анимация не останавливается.
Порядок работы
- Написать
@keyframes cardInс точными значениями из раздела «Что нужно сделать». - Подключить его к
.cardчерезanimation. - Написать
@keyframes badgePulse. - Подключить его к
.badgeсinfinite. - Сверить с вкладкой «Результат» и нажать Проверить.