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

@keyframes: раскадровка [2/31]

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

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

Если не задан начальный ключевой кадр, то анимация будет проигрываться из исходного стилевого состояния элемента к ближайшему шагу из перечисленных в keyframes и далее.

Если не задан конечный кадр, то после достижения последнего промежуточного шага, анимация проиграется в обратном направлении до достижения изначального состояния элемента.

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

Длительность анимации animation-duration задаётся в секундах или миллисекундах, например: 10s, 100ms.

А теперь давайте попробуем создать анимацию без описания начального кадра, используя шаги в 50% и 100%.

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
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="stone"> <div class="barrow-wheel"></div> </div> </body> </html>
CSS
.barrow-wheel { animation-name: rotate; animation-duration: 2s; } @keyframes rotate { 50% { } 100% { } }
HTML Academy
  1. Для кадра 50% добавьте трансформацию поворота rotate(90deg), а для кадра 100% — поворот до 360°,
  2. затем для кадра 50% измените поворот на -90°.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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