Что такое CSS Animations?
Уже довольно давно поддержка анимированных эффектов на web-страницах осуществлялась либо за счет средств HTML (пресловутый тег blink и marquee), либо, если надо было добиться чего-то большего — при помощи комбинирования CSS и JavaScript. Кроме того, оставались варианты с Flash и SVG. Однако все последние варианты достаточно сложны (требуют программирования), и предъявляют определенные требования к платформе (Flash, мало того, что «тормозит» и «зависает», так еще и не дружит с iOS).
Но около 2-х лет назад в рамках W3C было предложено дополнить спецификацию CSS 3 еще двумя модулями — CSS Animations и CSS Transitions. При помощи CSS Animations и CSS Transitions можно задать, скажем, начальное и конечное состояние объекта и способ перехода от одного состояния к другому. И вот, с выходом 5-й версии Firefox, уже можно сказать, что существенная часть современных браузеров поддерживает CSS-анимацию. Собственно говоря, кроме браузеров на движке Gecko выше 2.0 (Firefox 5, SeaMonkey 2.2), это браузеры на движке WebKit 53x (Safari 4, Chrome). Таким образом, учитывая сложившиеся тенденции, уже в ближайшее время свыше половины пользователей будут иметь программы просмотра веб-страниц, поддерживающие CSS animation/transition (последний, кстати был реализован еще раньше — в Safari 3 и Firefox 4).
Различие между CSS Animations и CSS Transitions состоит в том, что Animations представляет больше возможностей по управлению трансформацией объекта. Правда, при этом, опять-таки потребуется применение сценариев JavaScript. Иначе говоря, Animations — для программистов, а Transitions — для всех. Скажем, если вам нужно просто сделать кнопку, плавно меняющую цвет фона при наведении мышки, то можно ограничиться Transitions. Если же надо добиться более сложного выполнения — скажем, определить число повторов, а так же способ возвращения к исходной позиции между циклами, либо определить ключевые кадры (keyframes), то следует использовать Animations.
Всего в CSS3 предусмотрено 8 свойств для CSS-анимации (перечислены в таблице ниже) и объединяющее свойство animation для перечисления сразу нескольких параметров (подобно border, background и т.п.).
| Свойство | Допустимые значения | Описание |
|---|---|---|
| animation-delay | (время) | Определяет задержку между появлением элемента на странице (загрузкой) и началом анимации. Чаще всего определяется в секундах (s). |
| animation-direction | normal | alternate | Определяет, должна ли анимация при каждой итерации начинаться со стартовой позиции (normal) или возвращаться к стартовой позиции, выполняя с обратном порядке все указанные эффекты (alternate). |
| animation-duration | (время) | Указывает продолжительность одного цикла (обычно в секундах - s) |
| animation-iteration-count | infinite | (число) | Определяет число повторов циклов анимации. Если указано infinite (принято по умолчанию), то анимация будет происходить бесконечно, если же указано число, то повторится указанное число раз. |
| animation-name | строка-идентификатор | Задает имя @-правила keyframe, в котором описаны параметры анимации. |
| animation-play-state | running | paused | Позволяет «ставить на паузу» выполнение анимации (paused) и запускать её снова (running). |
| animation-timing-function | ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1,x2,x3,x4) | Определяет то, должно ли быть ускорение/замедление выполнения анимационного эффекта в начале и/или конце. |
| animation-fill-mode | none | forwards | backwards | both | Определяет порядок применения определенных в @keyframes стилей к объекту — до анимации (backwards), после анимации (forwards), в обоих крайних позициях (both), или же не следует их применять вообще (none, по умолчанию). |
| animation | - | Короткий вариант синтаксиса (объединяет animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction) |
Следует учитывать, что вплоть до текущего момента CSS Animation является экспериментальным свойством, а спецификация CSS3 по нему имеет статус Working Draft (черновик). Поэтому в бразуерах оно поддерживается с префиксом -webkit- (для Chrome/Safari) и -moz- (для Firefox/SeaMonkey). То же самое касается и дескриптора @keyframes.
Ну а теперь можно рассмотреть использование CSS Animations на примерах. Для начала попробуем сделать заголовок, постепенно меняющий свой цвет с желтого на зеленый:
h2 {
background: yellow; /* начальное значение */
-moz-animation-name: blinked; /* имя используемого @-правила анимации */
-moz-animation-duration: 2s; /* продолжительность эффекта - 2 секунды */
-moz-animation-iteration-count: infinite; /* повторять бесконечно */
-moz-animation-direction: alternate; /* при повторе постепенно возвращаться к начальному состоянию */
/* далее - все то же самое для Chrome и Safari */
-webkit-animation-name: blinked;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
/* правило для браузеров Mozilla */
@-moz-keyframes blinked {
to {background: green;}
}
/* правило для браузеров Chrome и Safari */
@-webkit-keyframes blinked {
to {background: green;}
}
Таким образом, любой заголовок H2, имеющийся на странице, для которой определена такая таблица стилей, будет постепенно изменять цвет своего фона с желтого на зеленый и обратно в браузерах Firefox 5, Safari 4 и Chrome 3 или выше. Во всех остальных он будет постоянно на желтом фоне.
А теперь усложним задачу: пусть заголовок выезжает из нижней части экрана и двигается наверх, при этом изменяя свой цвет с зеленого на желтый. Для этого нам надо, во-первых, установить абсолютное позиционирование элемента, а во-вторых — задать значения top для начального и конечного кейфреймов. Так же следует изменить число повторов с бесконечности на 1, увеличить продолжительность анимации до, скажем, 5 секунд и удалить за ненадобностью определение вида повтора. В итоге мы получаем следующее:
h2 {
background: yellow; /* начальное (и конечное) значение */
position: absolute;
top: 1%;
-moz-animation-name: blinked; /* имя используемого @-правила анимации */
-moz-animation-duration: 5s; /* продолжительность эффекта - 5 секунд */
-moz-animation-iteration-count: 1; /* выполнить 1 раз */
-webkit-animation-name: blinked;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
}
@-moz-keyframes blinked {
from {
top: 99%;
background: green;
}
to {
top: 1%;
background: yellow;
}
}
/* правило для браузеров Chrome и Safari */
@-webkit-keyframes blinked {
from {
top: 99%;
background: green;
}
to {
top: 1%;
background: yellow;
}
}
Теперь разберемся с паузой. Пусть наша CSS-анимация приостанавливается, если пользователь «поймает» указателем мышки заголовок в момент его перемещения. Для этого можно воспользоваться псевдоклассом hover для h2, в котором надо будет определить animation-play-state:
h2:hover {
-moz-animation-play-state: paused; /* при наведении курсора приостановить анимацию */
-webkit-animation-play-state: paused;
}
До этого момента мы определяли только начальное и конечное значения. Но вся прелесть CSS Animations (в отличие от Transitions) состоит в том, что можно указывать промежуточные положения. Определяют их в процентах от времени выполнения. Так, пусть наш заголовок после того, как поднимется вверх, переедет на пол экрана вправо. Тогда надо определить нужные положения в соответствующие моменты. Так, раз наш «ролик» длится 5 секунд, то на поднятие выделим 4 секунды, а на перемещение вправо — 1. Соответственно, это составляет 80% и 20% от 5 секунд. Получаем для Firefox:
@-moz-keyframes blinked {
from {
top: 99%;
left: 0%;
background: green;
}
80% {
top: 1%;
left: 0%;
}
to {
top: 1%;
left: 50%;
background: yellow;
}
}
Для Chrome – аналогично. Однако, проблема в том, что после завершения анимции блок «скачком» вернется влево, на свою начальную позицию. Решить эту проблему можно двумя способами. Во-первых, можно указать left: 50% в основном определении для H2. Кроме того, состояние объекта до и после анимации можно контролировать при помощи animation-fill-mode. По-хорошему, надо бы использовать оба этих способа. Ну а если мы хотим. Чтобы выполнение анимации началось не сразу, а через секунду после загрузки страницы, до следует указать это при помощи свойства animation-delay. В результате мы получим следующий CSS-код:
h2 {
background: yellow; /* начальное (и конечное) значение */
position: absolute;
top: 1%;
-moz-animation-name: blinked; /* имя используемого @-правила анимации */
-moz-animation-duration: 5s; /* продолжительность эффекта - 5 секунд */
-moz-animation-iteration-count: 1; /* выполнить 1 раз */
-moz-animation-delay: 1s; /* начало анимации — через 1 секунду после загрузки */
-moz-animation-fill-mode: both; /* применить определенные в @-правила к объекту и до и после анимации */
-webkit-animation-name: blinked;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s; /* начало анимации — через 1 секунду после загрузки */
-webkit-animation-fill-mode: both;
}
h2:hover {
-moz-animation-play-state: paused; /* при наведении курсора приостановить анимацию */
-webkit-animation-play-state: paused;
}
@-moz-keyframes blinked {
from {
top: 99%;
left: 0%;
background: green;
}
80% {
top: 1%;
left: 0%;
}
to {
top: 1%;
left: 50%;
background: yellow;
}
}
@-webkit-keyframes blinked {
from {
top: 99%;
background: green;
}
80% {
top: 1%;
left: 0%;
}
to {
top: 1%;
left: 50%;
background: yellow;
}
}
Остается рассмотреть последнее свойство - animation-timing-function. Оно определяет скорость выполнения эффекта при помощи кривых Безье. При этом можно как использовать функцию cubic-bezier, устанавливая свои значения, так и использовать один из 5 пресетов:
- ease соответствует cubic-bezier(0.25, 0.1, 0.25, 1.0).
- linear соответствует cubic-bezier(0.0, 0.0, 1.0, 1.0).
- ease-in соответствует cubic-bezier(0.42, 0.0, 1.0, 1.0).
- ease-out соответствует cubic-bezier(0.0, 0.0, 0.58, 1.0).
- ease-in-out соответствует cubic-bezier(0.42, 0.0, 0.58, 1.0).
Чтобы лучше разобраться, попробуйте установить для -moz-animation-timing-function и -webkit-animation-timing-function те или иные значения. В результате скорость выполенения будет то возрастать в начале и уменьшаться в конце, то наоборот. Указывать эти свойства можно как в общем определении, так и для отдельный кейфреймов. Например:
from {
top: 99%;
left: 0%;
background: green;
-moz-animation-timing-function: linear;
}
В итоге подъем заголовка будет происходить с равной скоростью, без постепенного замедления, как задается в принятом по умолчанию ease.
2011-07-12 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !
