Анимация элементов в CSS3 и ее свойства

Для реализации анимации в CSS3 создается контейнер: @keyframes (@-webkit-keyframes, @-moz-keyframes). В него помещаются различные css свойства, которые будут меняться с течением времени.

Пример:
@keyframes 'название анимации' {
from {CSS свойства} /* css в начале анимации */
50% {CSS свойства} /* css в середине анимации по времени*/
to {CSS свойства} /* css в конце анимации */
}

Замечание: Можно писать сразу все в процентах:
@keyframes 'название анимации' {
0% {background-color:#7F0055;}
20% {background-color:#7F0000;}
100% {background-color:#7F0055;}
}

А теперь подробнее...

Принцип работы.
1. Назначаем какому-нибудь блоку, например <div class="movecolor">, который будет анимироваться следующие параметры:
.movecolor {
/* начальные данные */
top: 50px;
background-color:#7F0055;

/* ОБЯЗАТЕЛЬНЫЕ ПАРАМЕТРЫ */
/* имя анимации */
animation-name: 'anim';
-webkit-animation-name: 'anim';
@-moz-animation-name: 'anim';

/* длительность анимации */
animation-duration: 8s;
-webkit-animation-duration: 8s;
@-moz-animation-duration: 8s;

/* НЕ ОБЯЗАТЕЛЬНЫЕ ПАРАМЕТРЫ */
/* Число циклов анимации. infinite - бесконечно */
animation-iteration-count: 5;
-webkit-animation-iteration-count: 5;
@-moz-animation-iteration-count: 5;

/* Время задержки анимации перед запуском*/
animation-delay: 5s;
-webkit-animation-delay: 5s;
@-moz-animation-delay: 5s;

/* Инверсия анимации
alternate — анимация проигрывается сначала как обычно, а потом в обратном направлении
normal - анимация проигрывается сначала как обычно*/
animation-direction: alternate;
-webkit-animation-direction: alternate;
@-moz-animation-direction: alternate;

/* Остановить или запустить анимацию.
Позволяет ставить анимацию на паузу, например, при наведении мыши hover.
running — анимация работает
paused — анимация стоит на паузе*/
animation-play-state: paused;
-webkit-animation-play-state: paused;
@-moz-animation-play-state: paused;

/* Эффект во время анимации. По умолчанию ease
ease - плавно начинается и плавно заканчивается
linear - работает незамедлительно, подходит для крутящихся объектов вокруг себя
ease-in - плавность в начале анимации
ease-out - плавно завершает анимацию*/
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
@-moz-animation-iteration-count: linear;
}

2. Просто вызываем блок анимации на наш div с указанным в нем именем и задаем css свойства, которые будут меняться в разные моменты времени.
@keyframes 'anim' {
0% {background-color:#7F0055;}
20% {background-color:#7F0000;}
70% {background-color:#7F0055;}
100% {background-color:#7F0000;}
}
@-webkit-keyframes 'anim' {
0% {background-color:#7F0055;}
20% {background-color:#7F0000;}
70% {background-color:#7F0055;}
100% {background-color:#7F0000;}
}
@-moz-keyframes 'anim' {
0% {background-color:#7F0055;}
20% {background-color:#7F0000;}
70% {background-color:#7F0055;}
100% {background-color:#7F0000;}
}

Примеры, что можно сделать с помощью анимации на CSS3:

.

 

Вы можете скачать продемонстрированные примеры