С помощью CSS3 Вы можете создавать на страницах полноценную анимацию без использования Adobe Flash и JavaScript.
ТвитнутьОбратите внимание: свойства анимации поддерживаются браузерами 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;
}
| Свойство | Описание |
|---|---|
| @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, при данном значении анимация всегда проигрывается в нормальном порядке. |