Анимация в CSS задается как список ключевых кадров с помощью правила @keyframes.

Правило @keyframes

Синтаксис выглядит следующим образом:

@keyframes имя_анимации{
  ключевой_кадр_1{
    свойство_1: значение_1;
    свойство_2: значение_2;
  }
  ключевой_кадр_2{
    свойство_1: значение_1;
    свойство_2: значение_2;
  }
  ключевой_кадр_3{
    свойство_1: значение_1;
    свойство_2: значение_2;
  }
  ..............
  ключевой_кадр_n{
    свойство_1: значение_1;
    свойство_2: значение_2;
  }
}

С парами свойство:значение все понятно. Необходимо разобраться, как задавать имя_анимации и как указывать ключевые кадры.

Имя анимации

Имя анимации используется в качестве идентификатора, по которому к ней можно обратиться. Оно указывается в качестве значения свойства animation-name. Это просто строка, без кавычек. Правило @keyframes, таким образом, представляет собой своего рода функцию, которая объявляется в одном месте, а используется потом, в другом.

Селекторы ключевых кадров

Анимация свойства длится некоторое время, а ключевые кадры представляют собой моменты на этой временной шкале. Невозможно описать, как изменяется значение свойства каждую секунду, поэтому выбираются несколько ключевых моментов, для которых прописывается значение изменяемого свойства, а затем программа сама обеспечивает плавное перетекание из одной точки в другую.
Ключевые кадры задаются в процентах от общего времени анимации. Начальный кадр можно обозначить как 0% или с помощью слова from (от). Последний кадр — 100% или to (до).

Собственно длительность анимации будет задана при ее вызове свойством animation-duration.

Поддержка

Поддержка CSS-анимации браузерами отличная, поэтому ее можно смело использовать.

screenshot_2

Примеры

Для наглядности будем передвигать абсолютно спозиционированный объект, изменяя его координаты. При этом еще немножко его повращаем.

@keyframes moveIt{
  from{
    top:50px;
    left:50px;
  }
  25%{
    top:50px;
    left:200px;
    transform:rotate(45deg);
  }
  50%{
    top:200px;
    left:200px;
    transform:rotate(90deg);
  }
  75%{
    top:200px;
    left:50px;
    transform:rotate(135deg);
  }
  to{
    top:50px;
    left:50px;
    transform:rotate(180deg);
  }
}

.block{
  width:30px;
  height:30px;
  background:green;
  position:absolute;
  top:50px;
  left:50px;
  animation-name:moveIt;
  animation-duration:20s;

}

Свойства анимации

И рассмотрим вкратце основные свойства CSS-анимации.

animation-nameназвание анимации, объявленной с помощью правила @keyframes
animation-durationдлительность анимации, задается в секундах(s) или миллисекундах(ms)
animation-timing-functionизменение скорости анимации в процессе ее выполнения
задается с помощью ключевого слова (easy, linear и т.д.) или вручную уравнением кривой Безье (cubic-bezier(x1, y1, x2, y2))
можно задать количество шагов(steps)
animation-delayзадержка анимации, может быть положительной или отрицательной
animation-iteration-countколичество повторов, задается целым числом
infinite — бесконечная анимация
animation-directionнаправление анимации:
alternate — с начала до конца и обратно
alternate-reverse — с конца до начала и обратно
normal

Это еще не все свойства CSS-анимации. Пожалуй, им следует посвятить отдельную тему.


Похожие статьи

Анимация в CSS: свойства

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован