Анимация в 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-анимации браузерами отличная, поэтому ее можно смело использовать.
Примеры
Для наглядности будем передвигать абсолютно спозиционированный объект, изменяя его координаты. При этом еще немножко его повращаем.
@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;
animation-iteration-count: infinite;
}Свойства анимации
И рассмотрим вкратце основные свойства 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-анимации. Пожалуй, им следует посвятить отдельную тему.
0 комментариев