Анимация / Привет, animation! [1/31]
×
Курс «Анимация»

Привет, animation! [1/31]

С помощью CSS можно создавать сложные анимации и очень гибко управлять ими. Описание CSS-анимации состоит из двух частей: набора ключевых кадров keyframes и параметров самой анимации.

Вот пример описания ключевых кадров анимации:

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

Анимация в примере имеет название stretching, и в ней описывается, как будет меняться стиль блока от начальной до конечной точки. Эту анимацию можно применить к любому элементу, для этого достаточно добавить в CSS два свойства — animation-name (название анимации) и animation-duration (длительность) — и задать им нужные значения. Например:

.button {
    animation-name: stretching;
    animation-duration: 1s;
}

Этот код назначит анимацию stretching элементам с классом button. В результате работы анимации элемент плавно увеличит ширину со 100px до 200px за 1 секунду.

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

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Привет, animation!</title> <meta charset="utf-8"> <base href="/assets/course80/"> <link rel="stylesheet" href="epoch1.css"> </head> <body class="ancient"> <div class="stone"> <div class="wood-wheel"></div> </div> </body> </html>
CSS
/* @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* .wood-wheel { animation-name: rotate; animation-duration: 2s; }
HTML Academy

Раскомментируйте в CSS:

  1. описание ключевых кадров анимации @keyframes rotate;
  2. правило для класса .wood-wheel.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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