Руководство по CSS анимации для новичков

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

Для начала начнем с двух стандартных понятий CSS3 анимации:

1. CSS Keyframes

Используя правило CSS Keyframes, Вы можете задать порядок и стиль CSS анимации. Ключевые кадры - основа анимирования в CSS. Они определяют вид CSS анимации на каждом этапе временной шкалы анимации. Записываются как @keyframes, у каждого ключевого кадра есть следующие компоненты:

  1. Имя: имя анимации, записывается сразу после ключевого слова @keyframes.
  2. Этап: этап анимации может быть указан в качестве процентного соотношения. От 0% (начальная стадия) до 100% (конечная стадия), вы можете задать любой этап и промежуточные стадии по своему усмотрению.>
  3. CSS Стили: Вы можете использовать любые CSS свойства на каждом этапе анимации, записывая их в фигурных скобках.

Пример:

@keyframes bounceOut {
  0% {
    transform: scale (0.1);
  }
  45% {
    transform: scale (5.5);
  }
  100% {
    transform: scale (0.1) 
  }
}

@keyframes testIn {
  From {
    opacity: 1;
  }
  To    {
    opacity: 0;
  }
}

2. Свойства CSS анимации:

После того, как вы задали все этапы и стили CSS анимации, Вы должны определить, как должна вести себя анимация. Свойство CSS Animation используется для вызова селектора @keyframes. Для чего использовать правило Animation:

  1. Присваивание селектора @keyframes для элементов, которые Вы хотите анимировать.
  2. Определить поведение CSS анимации

Есть множество свойств CSS анимации, два самых важных из них:

  1. animation-name: Также как определяете имя в @keyframes.
  2. animation-duration: Определяет продолжительность CSS анимации.

Пример:

test {
  animation-duration: 4s;
  animation-name: bounceOut;
}

Рассмотрим еще несколько полезных свойств CSS анимации.

  1. animation-timing-function: Определение скорости CSS анимации. Вы можете задать любую из существующих скоростей: linear, ease, ease-in, ease-out и ease-in-out. Также вы можете задать свою скорость, которая будет использовать кубическую кривую Безье.
    Синтаксис: animation-timing-function: ease-in;
  2. animation-delay: Установка задержки CSS анимации. Вы можете определить положительное, либо отрицательное значение задержки. Положительное значение задержки, скажем, 3s, укажет, что следующая CSS анимация начнется через 3s, в то время как отрицательное значение показывает, что CSS анимация начнется мгновенно, но не с самого начала а в момент анимации 3s.
    Синтаксис: animation-delay:3s;
  3. animation-iteration-count: Определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться
    Синтаксис: animation-iteration-count: 3;.
    Может принимать следующие значения:
    • #: Целое число.
    • infinite: Бесконечное проигрывание CSS анимации.
    • initial: Значение по умолчанию.
    • inherit: Установка значения родительского элемента.
  4. animation-direction: Направление CSS анимации. Может принимать значения normal, reverse и alternate.
    Синтаксис: animation-direction : alternate;
    • normal: Проигрывание вперед.
    • reverse: Проигрывание в обратную сторону.
    • alternate: Различные направления проигрывания (вперед, назад и т.д.).
  5. animation-fill-mode: С помощью данного свойства, вы можете указать какие стили будут применяться после окончания CSS анимации.
    Синтаксис: animation-fill-mode: both;
    Вы можете выбрать один из следующих стилей:
    • backwards: Начальный ключевой кадр CSS анимации будет отображаться в течение всего времени задержки анимации (имеет смысл применять только к анимациям с ненулевой задержкой).
    • forwards: Эффект от CSS анимации будет виден даже тогда, когда анимация закончилась (после завершения анимации элемент получает не начальные значения, а какие-то промежуточные из анимации).
    • both: Начальный ключевой кадр CSS анимации будет отображаться в течение всего времени задержки анимации, а последний будет отображаться даже тогда, когда анимация закончилась (имеет смысл применять только к анимациям с ненулевой задержкой).
    • none: Эффект от CSS анимации будет наблюдаться лишь в течение времени анимации.
  6. animation-play-state: Определяет, работает ли CSS анимация или стоит на паузе.
    Синтаксис: animation-play-state: paused;
    Можно указать несколько значений через запятую:
    1. playing: Анимация работает.
    2. paused: Анимация стоит на паузе.

Давайте создадим мигающий эффект, используя вышеуказанные свойства:

.element {
  animation-name: Blink;
  animation-duration: 6s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

Получился эффект мигания, который имеет задержку в 1 секунду,общая продолжительность CSS анимации составляет 6 секунд. Анимация работает в бесконечном цикле и ее направление чередуются.

Добавление нескольких CSS анимаций

Вы также можете добавить сразу несколько анимаций, разделяя их запятыми:

.element {
  animation: Fade 4s 1s infinite linear alternate,
             Rotate 4s 1s infinite linear alternate;
}

Перевод статьи CSS animation guide for novices

Тэги: animatenovices

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.