Анимация в CSS

Анимация в CSS — очень интересная возможность для создания подвижных фрагментов на сайте. Двигать (а также менять цвет, размеры и т.д.) можно при помощи свойств начинающихся на animate-property, где вместо property подставляется одно из слов: name, duration, timing-function, iteration-count, direction, play-state, delay, fill-mode. Но можно записать сокращенный формат animation, описав все внутри. Почти как background. CSS анимация позволяет менять значения свойств, например можно изменить цвет элемента и поменять его расположение.

Значения анимационных свойств

• animation-name название анимации. Текстовое произвольное обозначение ссылающееся на набор анимационных кадров — keyframes
• animation-duration продолжительность анимации
• animation-timing-function временная функция. Зависимость скорости анимации от времени
• animation-iteration-count количество повторений анимационного эффекта
• animation-direction направление
• animation-play-state для указания паузы
• animation-delay задержка перед началом анимации
• animation-fill-mode режим заполнения
• animation сокращенное название CSS-свойства

Анимация будет применена к элементу, если у него прописано свойство animation-name, связанное с правильно записанными кадрами (keyframes) анимации. В нем можно указать ссылки на несколько анимаций, разделив названия запятой. Также в названии можно использовать дефис  (animation-name: move или animation-name: leap—towards)

Пример перемещения (jsfiddle)

.el {
position: absolute;
width: 100px;
height: 100px;
background-color: #369;
animation-name: move; /* такое же название указано ниже в наборе кадров */
animation-duration: 5s; /* анимация будет длиться 5 секунд */
animation-iteration-count: 7; /* количество повторений равно 7 */
}

@keyframes move{
/* всего два кадра: начальное и конечное положение очень похоже на transition */
from { 
left: 0;  /* начальная позиция */
background-color: #ff9;
border-radius: 0;
}

to {
left: 200px; /* конечная позиция */
background-color: #706367;
border-radius: 100%;
}

}

Внутри директивы @keyframes описывается начальное состояние анимируемого элемента, промежуточные и конечное. В примере выше, указаны только начальный и конечный кадры. При необходимости промежуточные кадры добавляются указанием расположения в анимации через проценты. Вместо from {} пишется 0% {}, потом идут  30% {} и другие фрагменты; последний кадр 100% {}. В фигурных скобках указываются CSS-свойства для анимации. Изменим в нашей анимации move содержимое фреймов на следующее:

@keyframes move{

0% { /* вместо from */
left: 0;
background-color: #ff9;
border-radius: 0;
}

25% { /* один из промежуточных кадров */
left: 200px;
top: 0;
background-color: #706367;
border-radius: 100%;
}

50% {
left: 200px;
top: 200px;
background-color: #f63;
border-radius: 50%;
}

75% {
left: 0px;
top: 200px;
background-color: #ff9;
border-radius: 20%;
}
100% {
left: 0px;
top:  0px;
background-color: #ff9;
border-radius: 0%;
}

Теперь элемент совершает движения по периметру квадрата, при этом меняет цвет и радиус закругления бордюра. animation-timing-function позволяет определить будет ли двигаться элемент равномерно или с ускорением в начале анимации или в конце ее. animation-timing-function: ease-out внутри фрейма говорит нам, что при ближе к завершению кадра анимация замедлится, значение ease-in — наоборот показывает, что медленным будет старт анимации.  Подробно узнать о временных функциях можно посмотрев раздел работы с transition .

animation-duration позволяет указать продолжительность анимации в секундах или миллисекундах. Например, animation-duration: 10s или animation-duration: 250ms.  animation-iteration-count — количество повторений анимации; задается целым числом или словом infinity для бесконечного количества повторений. animation-fill-mode позволяет указать будут ли свойства первого фрейма анимации выполнены до начала анимации или нет.