Условие
В style.css сделайте появление карточки .card через @keyframes fadeUp с тремя кадрами. У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что нужно сделать
- Создайте
@keyframes fadeUpс кадрами:0%—opacity: 0,transform: translateY(24px) scale(0.96);50%—opacity: 1,transform: translateY(-6px) scale(1.02);100%—opacity: 1,transform: translateY(0) scale(1).
- У
.cardдобавьтеanimation: fadeUp 0.9s ease-out 0.2s forwards(длительность0.9s, задержка0.2s,forwards— чтобы остаться на конечном кадре).
Подсказка для новичка
Сначала @keyframes fadeUp с тремя кадрами и точными значениями выше, потом animation на .card. Подробный разбор свойств — в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Карточка плавно появляется снизу вверх
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">/<head>/<meta charset="UTF-8" />/<title>/<link rel="stylesheet" href="style.css" />- шапка документа.<body>- видимое содержимое; внутри -.card.<div class="card">- синяя карточка с текстом «Привет».body- селектор тега:margin,background,font-family..card- размер, цвет, текст; сюда же -animation.@keyframes fadeUp- кадры появления: 0% / 50% / 100%.opacity,transform,translateY,scale- что меняется в кадрах.animation- имя, длительность, плавность, задержка,forwards.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
Есть правила
body
и
.card.
Нужно добавить
@keyframes fadeUp
и свойство
animation
у карточки.
Правило body
-
margin: 40px- отступ страницы 40px. -
background: #0f172a- тёмный фон. -
font-family: Arial, sans-serif- шрифт текста.
Правило .card
-
width: 180px/padding: 20px- ширина и внутренние отступы. -
background: #2563eb/color: #fff- синий фон и белый текст. -
font-weight: 700/text-align: center- жирный текст по центру. -
В решении:
animation: fadeUp 0.9s ease-out 0.2s forwards.
Анимация fadeUp
@keyframes
описывает кадры. Имя
fadeUp
должно совпасть с именем в
animation.
-
0%-opacity: 0,transform: translateY(24px) scale(0.96)(невидимо, чуть ниже и меньше). -
50%-opacity: 1,translateY(-6px) scale(1.02)(промежуточный «подскок»). -
100%-opacity: 1,translateY(0) scale(1)(финальное положение). -
В
animation:0.9s- длительность,ease-out- плавность,0.2s- задержка старта,forwards- оставить стили последнего кадра после окончания.
Коротко: сначала
@keyframes fadeUp
с тремя кадрами (opacity + translateY + scale), потом
animation
на
.card
с delay и
forwards.
Сверьте с вкладкой
«Результат».