Анимация / @keyframes: группировка кадров [4/31]
×
Курс «Анимация»

@keyframes: группировка кадров [4/31]

Ключевые кадры в keyframes можно группировать, для этого нужно перечислить их через запятую. Рассмотрим пример:

@keyframes stretching {
    0%, 50% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

В этом примере первые два кадра сгруппированы. Анимируемый элемент сначала изменит свою ширину до 100px и останется в этом состоянии половину времени анимации. А за вторую половину времени он растянется от 100px до 200px.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>@keyframes: группировка кадров</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 { 0% { transform: translateY(0px); } 50% { transform: translateY(-250px); } 100% { transform: translateY(-300px); } }
HTML Academy
  1. Измените значение кадра 50% на 50%, 80%,
  2. а затем поменяйте трансформацию перемещения в кадре 50%, 80% на transform: translateY(-50px)
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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