Анимация / @keyframes: from и to [3/31]
×
Курс «Анимация»

@keyframes: from и to [3/31]

Как уже говорилось в предыдущем задании, начальный и конечный ключевые кадры задаются с помощью слов from и to или значений 0% и 100%.

А промежуточные ключевые кадры задаются с помощью процентов. Вот пример анимации из 4 кадров:

@keyframes coloring {
  from { background-color: red; }
  33%  { background-color: yellow; }
  66%  { background-color: green; }
  to   { background-color: blue; }
}

Опробуем from, to и промежуточные кадры в деле!


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>@keyframes: from и to</title> <meta charset="utf-8"> <base href="/assets/course80/"> <link rel="stylesheet" href="epoch1.css"> </head> <body class="ancient"> <div class="lift-top"> <div class="platform"> <span class="stone-wheel"></span> </div> </div> </body> </html>
CSS
.platform { animation-name: lift-up; animation-duration: 3s; } @keyframes lift-up { }
HTML Academy

Создайте @-правило с именем lift-up, содержащее ключевые кадры:

  1. from с трансформацией transform: translateY(0px);
  2. 50% с трансформацией transform: translateY(-250px);
  3. 100% с трансформацией transform: translateY(-300px).
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.