(Перевод Виктории Шидловской статьи Louis Lazaris в Smashing Magazine — An Introduction To CSS3 Keyframe Animations)

Наверное, вы уже слышали о CSS3-анимации. Спецификация была разработана пару лет назад и, как показывает время, становится технологией будущего. Это элегантный способ решить проблему анимации в вебе.

Для этой заметки я создал простую анимацию, показывающую различные возможности CSS3. Взгляните на демо-версию, чтобы понять суть.

На странице справа есть также панель с CSS-кодом, который анимирует различные элементы пейзажа (небо, солнце, луну, землю и облако). Взгляните, а потом читайте дальше эту статью, объясняющую различные части анимации.

(Внимание: работает во всех новых браузерах, кроме Opera и IE).

Здесь я буду описывать работу CSS только одного элемента — солнца. Этого будет достаточно для вашего понимания покадровой CSS-анимации. Все остальное вы можете посмотреть в исходном коде демо-страницы.

Keyframe @ Rule

Первая необычная вещь, которую вы сразу заметите в коде анимации CSS3 — это keyframes @ rule. Согласно спецификации, за CSS @ rule должен идти идентификатор, определяемый разработчиком, который обращается к другой части CSS.

После @ rule и идентификатора следует набор установок (как стили внутри блоков в обычном CSS. Этот набор заключается в фигурные скобки. Другие, уже знакомые вам @ rules, можно посмотреть здесь.

А у нас @ rule, которое мы будем использовать:

@-webkit-keyframes sunrise {
         /* установки идут здесь … */
}

Слово sunrise (восход) — это идентификатор, который мы выбираем сами, чтобы обращаться к анимации.

Обратите внимание, что я использую -webkit- префикс во всех примерах кода здесь и в демо. О поддержке браузерами будет написано ниже в этой статье, пока что достаточно сказать, что самыми стабильными браузерами для работы анимации являются те, что основаны на WebKit.

Keyframe Selectors

Давайте добавим некоторые установки в @ rule:

@-webkit-keyframes sunrise {
   0% {
       bottom: 0;
       left: 340px;
       background: #f00;
   }
     33% {
       bottom: 340px;
       left: 340px;
       background: #ffd630;
    }
    66% {
       bottom: 340px;
      left: 40px;
       background: #ffd630;
    }
     100% {
       bottom: 0;
       left: 40px;
       background: #f00;
    }
 }

Кроме установок обратите внимание на keyframe selector (определитель, или селектор кадра). На примере выше keyframe selectors — это проценты 0%, 33%, 66%, и 100%. При этом 0% и 100% могут быть заменены ключевыми словами “from” и “to” соответственно, и вы получите тот же результат.

(Примечание переводчика: То есть, если анимация имеет длительность во времени, например, 10 секунд, то проценты указывают на ключевые кадры в 3,3 секунды, 6,6 и 10 секунд соответственно).

Хотя спецификация все еще находится в разработке, некоторые правила уже установлены. Например, порядок указания кадров не имеет значения. Анимация будет проигрываться согласно процентным указателям, а не в том порядке, как они указаны. Так что если вы поставите ключевой кадр “to” перед “from”, анимация все равно будет прокручиваться в нужном порядке. Также, если селекторы “to” и “from” не объявлены, браузер автоматически их создаст. Так что набор установок внутри @ rule, указанный в спецификации CSS3, не является догмой.

Ключевые кадры, анимирующие солнце

Для анимирования солнца я установил 4 ключевых кадра. Комментарии в коде объясняют происходящее.

В первом кадре солнце красного цвета (как обычно при восходе или закате), и находится ниже уровня земли (т. е. невидимо). Положение элемента должно быть relative или absolute, чтобы получился нужный эффект. Это достигается с помощью значений left и bottom. Я также использовал z-index, чтобы быть уверенным, что солнце будет находиться «под» землей. Обратите внимание, что стили, указанные в кадре, это стили, которые участвуют в анимации, то есть, изменяются. Другие стили, такие как z-index и position, объявлены в другом месте кода, так что здесь не указаны.

0% {
         bottom: 0; /* солнце внизу*/
         left: 340px; /* солнце справа*/
         background: #f00; /* солнце красное */
 }

Где-то на трети нашей анимации (33%) солнце находится на одном и том же уровне по оси x, но меняет цвет с красного на желто-оранжевый и поднимается вверх.

33% {
         bottom: 340px; /* солнце встает */
         left: 340px;
         background: #ffd630; /* меняет цвет */
     }

Затем, примерно через две трети анимации (66%) солнце перемещается влево на 300px. Заметьте, что я опять указал его цвет как в кадре 33%, чтобы солнце не начало краснеть слишком рано

66% {
         bottom: 340px;
         left: 40px; /* солнце пересекает небо */
         background: #ffd630; /* цвет все тот же */
     }

И, наконец, солнце плавно переходит к своей финальной стадии — становится красным и опускается ниже уровня земли.

100% {
         bottom: 0; /* солнце садится */
         left: 40px;
         background: #f00; /* становится красным */
      }

Ассоциирование анимации с элементом

Следующий кусок кода привязывает название анимации (в нашем случае слово sunrise) с определенным элементом в HTML:

#sun.animate{
         -webkit-animation-name: sunrise;
 }

Представляю вашему вниманию свойство animation-name. Значение этого свойства должно соответствовать идентификатору существующего @keyframes rule, иначе анимация не заработает.

Объект, к которому я обращаюсь, это элемент с id sun и классом animate. Зачем нужно дублировать код таким образом? Затем, чтобы можно было применить ява-скрипт и присвоить класс динамически. Например, в демо открываемая страница статична, анимация запускается после нажатия кнопки. Это значит, что изначально классы имеют другие стили, но после нажатия кнопки новые стили присваиваются всем элементам, и анимация запускается. Мы добиваемся того, что анимацию может контролировать пользователь.

Естественно, это всего лишь один способ добиться контроля. Как всегда в случае с CSS и JavaScript, существует множество способов достигнуть одного и того же.

Функции Duration и Timing (Длительность и Развитие)

Давайте добавим еще две строки к нашему CSS:

#sun.animate {
         -webkit-animation-name: sunrise;
        -webkit-animation-duration: 10s;
         -webkit-animation-timing-function: ease;
 }

Вы можете указать длительность анимации с помощью свойства animation-duration. Duration указывает сколько времени должно быть отпущено на один полный анимационный цикл. Вы можете указать значение в секундах (например, 4s), миллисекундах (2000ms), и в секундах в десятичных дробях (3.3s).

Вряд ли в спецификации появятся все остальные доступные меры измерения времени. К тому же вряд ли вам понадобится что-то большее нежели секунды. Однако вы можете указать минуты, часы и даже дни, если пересчитаете все это в секунды.

Свойство animation-timing-function, указанное для анимации целиком, позволяет определить развитие анимации в пределах одного цикла. Доступные значения для animation-timing-function — это ease, linear, ease-out, step-start и многие другие, как указано в спецификации.

Для нашего примера я выбрал ease (замедление), которое также применяется по умолчанию. Так что в нашем примере мы можем не указывать это свойство, анимация будет вести себя без изменений.

Кроме того, вы можете применять timing к каждому кадру, как здесь:

@-webkit-keyframes sunrise {
    0% {
       background: #f00;
       left: 340px;
       bottom: 0;
       -webkit-animation-timing-function: ease;
    }
    33% {
       bottom: 340px;
       left: 340px;
       background: #ffd630;
       -webkit-animation-timing-function: linear;
    }
     66% {
       left: 40px;
       bottom: 340px;
       background: #ffd630;
       -webkit-animation-timing-function: steps(4);
    }
     100% {
       bottom: 0;
       left: 40px;
       background: #f00;
       -webkit-animation-timing-function: linear;
    }
 }

В каждом ключевом кадре наверху стоит отдельная функция timing. Одна из них имеет значение steps (шаги), это значение перебрасывает анимацию вперед на указанное количество предполагаемых шагов. Конечный кадр тоже имеет свою функцию timing, но она сработает только если анимация будет проиграна задом наперед.

В нашем примере мы не используем покадровые функции timing, в данном уроке я просто показал, что это возможно.

Iteration Count и Direction (Количество раз и Направление)

Добавим еще две строчки в наш код:

#sun.animate {
         -webkit-animation-name: sunrise;
         -webkit-animation-duration: 10s;
         -webkit-animation-timing-function: ease;
         -webkit-animation-iteration-count: 1;
         -webkit-animation-direction: normal;
 }

Пример сверху демонстрирует еще два свойства: первое указывает, сколько раз нужно проиграть анимацию, второе указывает, в каком направлении ее проигрывать при множественном просмотре.

Свойство animation-iteration-count поставлено на 1, что означает, что анимация будет продемонстрирована только раз. Свойство может иметь значение infinite (бесконечность).

Свойство animation-direction установлено на normal (нормальный, значение по умолчанию), это значит, что анимация будет проигрываться в том же направлении (от начала до конца) при каждом просмотре. В нашем случае анимация будет проиграна только один раз, так что это свойство указывать необязательно. Другое свойство, которое мы могли бы здесь указать, это alternate (альтернативно), что заставит анимацию играть в обратном направлении при каждой следующей прокрутке. Чтобы это свойство было применено, iteration count должно быть установлено на 2 или большее количество раз.

Delay And Play State (Отсрочить и Состояние проигрывателя)

Еще две строки в наш CSS:

 #sun.animate {
         -webkit-animation-name: sunrise;
         -webkit-animation-duration: 10s;
         -webkit-animation-timing-function: ease;
         -webkit-animation-iteration-count: 1;
         -webkit-animation-direction: normal;
         -webkit-animation-delay: 5s;
         -webkit-animation-play-state: running;
 }

Первое представленное вам свойство animation-delay делает именно то, что вы думаете — отсрачивает анимацию на указанное вами количество времени. Интересно, что свойство может принимать отрицательное значение, которое передвигает стартовую точку отсчета внутри анимации на указанное количество секунд.

Свойство animation-play-state, которое возможно удалят из спецификации, принимает два возможных значения running и paused. У этого свойства ограниченная практическая польза. По умочанию значение running, а paused просто ставит анимацию на паузу, пока пользователь вречную не нажмет play. Вы не можете указать свойство paused внутри кадра, но польза свойства возникает, когда в применяете JavaScript, чтобы анимация реагировала на действия пользователя, какие-то введенные значения и т. п.

Fill Mode

UPDATE: свойство удалено из спецификации.

Остальное в спецификации

Более подробно все возможные свойства для CSS-анимации вы можете посмотреть в спецификации.

Поддержка браузерами

Как уже было сказано, разобранный здесь код относится только к одному элементу анимации — солнцу. Чтобы посмотреть код для всех элементов, посетите демонстрационную страницу. Вы можете либо открыть исходный код страницы, либо полистать вкладки справа.

В демо не использованы никакие картинки, и анимация не использует ява-скрипты. Солнце, луна и облако нарисованы средствами CSS3 с помощью свойства border-radius, и ява-кодирование применено только к вкладкам справа и к кнопке, запускающей и прерывающей анимацию.

При просмотре анимации в любом НЕ WebKit-браузере, она не сработает.

Список поддерживающих CSS-анимацию браузеров:

• Chrome 2+,
• Safari 4+,
• Firefox 5+,
• iOS Safari 3.2+,
• Android 2.1+.

Также получено официальное заявление о том, что анимация будет поддерживаться в Opera.

Ну и ни одного слова об ожидаемой поддержке в IE.