Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 13.11.2018

Наверх

Наверх

CSS3-анимация

Свойство transition, рассмотренное в предыдущем уроке, — это лишь один из способов создания анимации в CSS3. С ним вы ограничиваетесь лишь двумя наборами стилей — до перехода и после.

В отличие от обычного transition, расширенная CSS-анимация позволяет создавать цепочку переходов: от одного набора стилевых правил ко второму, от второго к третьему, от третьего к четвертому и так далее. Кроме этого, увеличивается и количество вариантов запуска анимации: вы можете сделать проигрывание сразу после загрузки веб-страницы, а не только при наведении курсора. Также можно заставить анимацию повториться несколько раз либо вообще сделать бесконечный цикл.

Как создать CSS-анимацию

Порядок создания анимации можно разделить на два этапа:

  1. Создание необходимого количества ключевых кадров через правило @keyframes.
    Запись стилей для каждого кадра.
  2. Подключение анимации к одному либо нескольким элементам.

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