Анимация предоставляет большие возможности за изменением стиля элемента. При переходе у нас есть набор свойств с начальными значениями, которые имеет элемент до начала перехода, и конечными значениями, которые устанавливают после завершения перехода. Тогда как при анимации мы можем иметь не только два набора значений - начальные и конечные, но и множество промежуточных наборов значений.
Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.
По сути переходы применяют ту же модель - так же неявно определяются два ключевых кадра - начальный и конечный, а сам переход представляет переход от начального к конечному ключевому кадру. Единственное отличие анимации в данном случае состоит в том, что для анимации можно определить множество промежуточных ключевых кадров.
В целом объявление ключевого кадра в CSS3 имеет следующую форму:
@keyframes название_анимации {
from {
/* начальные значения свойств CSS */
}
to {
/* конечные значения свойств CSS */
}
}
После ключевого слова @keyframes идет имя анимации. Затем в фигурных скобках определяются как минимум два ключевых кадра. Блок после ключевого слова from объявляется начальный ключевой кадр, а после клюевого слова to в блоке определяется конечный ключевой кадр. Внутри каждого ключевого кадра определяется одно или несколько свойств CSS, подобно тому, как создается обычный стиль.
Например, определим анимацю для фонового цвета элемента:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Анимация в CSS3</title>
<style>
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
animation-name: backgroundColorAnimation;
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
В данном случае анимация называется backgroundColorAnimation. Анимация может иметь произвольное название.
Эта анимация предоставляет переход от красного цвета фона к синему. Причем после завершения анимации будет устанавливться тот цвет, который определен у элемента div.
Чтобы прикрепить анимацию к элементу, у него в стиле применяется свойство animation-name. Значение этого свойства - название применяемой анимации.
Также с помощью свойства animation-duration необходимо задать время анимации в секундах или миллисекундах. В данном случае время анимации - это 2 секунды.
При подобном определении анимация будет запускаться сразу после загрузки страницы. Однако можно также запускать анимацию по действию пользователя.
Например, с помощью определения стиля для псевдокласса :hover можно определить запуск анимации при наведении указателя мыши на элемент:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
}
div:hover{
animation-name: backgroundColorAnimation;
animation-duration: 2s;
}
Как уже выше говорилось выше, анимация кроме двух стандартных ключевых кадров позволяет задействовать множество промежуточных. Для определения промежуточного кадра применяется процентное значение анимации, в котором этот кадр должен использоваться:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
25%{
background-color: yellow;
}
50%{
background-color: green;
}
75%{
background-color: blue;
}
to {
background-color: violet;
}
}
В данном случае анимация начинается с красного цвета. Через 25% времени анимации цвет меняется на желтый, еще через 25% - на зеленый и так далее.
Также можно в одном ключевом кадре анимировать сразу несколько свойств:
@keyframes backgroundColorAnimation {
from {
background-color: red;
opacity: 0.2;
}
to {
background-color: blue;
opacity: 0.9;
}
}
Также можно определить несколько отдельных анимаций, но применять их вместе:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
@keyframes opacityAnimation {
from {
opacity: 0.2;
}
to {
opacity: 0.9;
}
}
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
animation-name: backgroundColorAnimation, opacityAnimation;
animation-duration: 2s, 3s;
}
В качестве значения свойства animation-name через запятую перечисляются анимации, и также через запятую у свойства
animation-duration задается время этих анимаций. Название анимации и ее время сопоставляются по позиции, то есть анимация
opacityAnimation будет длиться 3 секунды.
В общем случае после завершения временного интервала, указанного у свойства animation-duration, завершается и выполнение анимации.
Однако с помощью дополнительных свойств мы можем переопределить это поведение.
Так, свойство animation-iteration-count определяет, сколько раз будет повторяться анимация. Например, 3 повтора анимации подряд:
animation-iteration-count: 3;
Если необходимо, чтобы анимация запускалась бесконечное количество раз, то этому свойству присваивается значение infinite:
animation-iteration-count: infinite;
При повторе анимация будет начинаться снова с начального ключевого кадра. Но с помощью свойства animation-direction: alternate;
противоположное направление анимации при повторе. То есть она будет начинаться с конечного ключевого кадра, а затем будет переход к начальному кадру:
animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 2s; animation-iteration-count: 3; animation-direction: alternate;
При окончании анимации браузер устанавливает для анимированного элемента стиль, который был бы до применения анимации. Но свойство
animation-fill-mode: forwards позволяет в качестве окончательного значения анимируемого свойства установить именно то, которое было в последнем кадре:
animation-name: backgroundColorAnimation; animation-duration: 2s; animation-iteration-count: 3; animation-direction: alternate; animation-fill-mode: forwards;
С помощью свойства animation-delay можно определить время задержки анимации:
animation-name: backgroundColorAnimation; animation-duration: 5s; animation-delay: 1s; /* задержка в 1 секунду */
Как и к переходам, к анимации можно применять все те же функции плавности:
linear: линейная функция плавности, изменение свойства происходит равномерно по времени
ease: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение
ease-in: функция плавности, при которой происходит только ускорение в начале
ease-out: функция плавности, при которой происходит только ускорение в начале
ease-in-out: функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение
cubic-bezier: для анимации применяется кубическая функция Безье
Для установки функции плавности применяется свойство animation-timing-function:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div{
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
animation-name: backgroundColorAnimation;
animation-duration: 3s;
animation-timing-function: ease-in-out;
}
Свойство animation является сокращенным способом определения выше рассмотренных свойств:
animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode
Первые два параметра, которые предоставляют название и время анимации, являются обязательными. Остальные значения не обязательны.
Возьмем следующий набор свойств:
animation-name: backgroundColorAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: 3; animation-direction: alternate; animation-delay: 1s; animation-fill-mode: forwards;
Этот набор будет эквивалентен следующему определению анимации:
animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;
В качестве примера с анимацией создадим простейший анимированный баннер:
<!DOCTYPE html>
<html>
<head>
<title>HTML-баннер</title>
<meta charset="utf-8" />
<style type="text/css">
@keyframes text1
{
10%{opacity: 1;}
40%{opacity: 0;}
}
@keyframes text2
{
30%{opacity: 0;}
60%{opacity:1;}
}
@keyframes banner
{
10%{background-color: #008978;}
40%{background-color: #34495e;}
80%{background-color: green;}
}
.banner
{
width: 600px;
height: 120px;
background-color: #777;
margin: 0 auto;
position: relative;
}
.text1,.text2
{
position: absolute;
width: 100%;
height: 100%;
line-height: 120px;
text-align: center;
font-size: 40px;
color: #fff;
opacity: 0;
}
.text1
{
animation : text1 6s infinite;
}
.text2
{
animation : text2 6s infinite;
}
.animated
{
opacity: 0.8;
position: absolute;
width: 100%;
height: 100%;
background-color: #34495e;
animation: banner 6s infinite;
}
</style>
</head>
<body>
<div class="banner">
<div class="animated">
<div class="text1">Только в этом месяце</div>
<div class="text2">Скидки по 20%</div>
</div>
</div>
</body>
</html>
Здесь одновременно срабатывают три анимации. Анимация "banner" изменяет цвет фона баннера, а анимации text1 и text2 отображают и скрывают текст с помощью настроек прозрачности. Когда первый текст виден, второй не виден и наоборот. Тем самым мы получаем анимацию текста в баннере.