AJAX загрузка
home

С помощью CSS3 Вы можете создавать на страницах полноценную анимацию без использования Adobe Flash и JavaScript.

CSS3 Анимация

Обратите внимание: свойства анимации поддерживаются браузерами IE10+, Firefox и Opera. Для браузеров Chrome и Safari перед свойством требуется добавить префикс -webkit.

Для создания анимации в CSS3 используется свойство @keyframes.

Данное свойство представляет собой контейнер, в который должны помещаться различные свойства оформления.

Синтаксис:

@keyframes имяАнимации
{
from {CSS свойства} /* Оформление элемента перед началом анимации */
to {CSS свойства} /* Оформление элемента после завершения анимации */
}


После того, как анимация была создана необходимо добавить к элементу, который Вы хотите анимировать CSS3 свойство animation и указать в нем имя анимации (1 значение) и время (2 значение), в течении которого она будет выполняться.

Также Вы можете устанавливать количество повторов анимации (3 значение).

Пример

@keyframes anim {
from {margin-left:3px;}
to {margin-left:500px;}
}

#wrap1 {
animation:anim 4s 3;
}


Быстрый просмотр

Ход выполнения анимации

Вы можете определять ход выполнения анимации не только с помощью ключевых слов from и to (которые использовались в предыдущем примере), но и с помощью %.

С помощью % Вы можете более точно контролировать ход выполнения анимации, например можно указать, что определенный элемент в начале анимации (0%) должен быть белым к середине (50%) должен окрашиваться в оранжевый цвет, а к концу (100%) становиться черным.

Пример

@keyframes anim {
0% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
30% {margin-left:3px;margin-top:250px;background-color:#7F0055;}
60% {margin-left:500px;margin-top:250px;background-color:black;}
100% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
}

#wrap1 {
animation:anim 6s 3;
}


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

Свойство Описание
@keyframes Контейнер для определения анимации.
animation Позволяет задать все значения для настройки выполнения анимации за одно определение.
animation-name Позволяет указать имя анимации.
animation-duration Позволяет задать скорость выполнения анимации в секундах (по умолчанию имеет значение 0).
animation-timing-function Позволяет задать функцию смягчения отвечающую за плавность выполнения анимации (по умолчанию имеет значение ease).
animation-delay Позволяет задать задержку перед началом выполнения анимации (по умолчанию имеет значение 0).
animation-iteration-count Позволяет задать количество повторов анимации (по умолчанию имеет значение 1).
animation-direction При значении alternate в нечетные разы (1,3,5 ...) анимация будет проигрываться в нормальном, а в четные (2,4,6 ...) в обратном порядке. По умолчанию данное свойство имеет значение normal, при данном значении анимация всегда проигрывается в нормальном порядке.