Спонсор месяца:
Отели Петербург – гостиница Серебряный Век в центре.

Меньше года назад, Dave Hyatt, Dean Jackson и Chris Marrin предложили внедрить новые CSS возможности: анимация, трансформация и CSS-константы. Последнее реализовано разработчиками Webkit еще в июне. А вчера на их официальном блоге появилась заметка о том, что теперь в последней версии Webkit внедрена поддержка CSS-анимации.

Чтобы увидеть анимацию в действии установите WebKit Nightly Build и откройте демо-страничку. Вы должны увидеть как на фоне картинки падают листья.

Давайте теперь разберем на примере движущегося блока как работает простейшая анимация.

Прописать правила анимации очень просто. В первую очередь, используйте @-webkit-keyframes.

@-webkit-keyframes bounce {
 from {
   left: 0px;
 }
 to {
   left: 200px;
 }
}

Блок @-webkit-keyframes содержит правила для ключевых кадров, которые определяют саму анимацию. Движок анимации будет плавно интерполировать между ключевыми кадрами. В приведенном выше примере, анимация называется “bounce” и содержит 2 ключевых кадра: один, определяющий начальное положение кадра (блок “from”) и второй, определяющий конечное положение (блок “to”).

Прописав правила анимации, внедренить ее можно с использованием -webkit-animation-name и связанных с ним свойств.

div {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
}

Анимация будет применена для описанного выше блока div: мы указали имя анимации (“bounce”), установили ее продолжительность в 4 секунды, количество вызовов анимации – 10 раз и установили, чтобы каждая раз анимация двигалась в противоположных направлениях.

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

@-webkit-keyframes pulse {
 0% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
 33% {
   background-color: blue;
   opacity: 0.75;
   -webkit-transform: scale(1.1) rotate(-5deg);
 }
 67% {
   background-color: green;
   opacity: 0.5;
   -webkit-transform: scale(1.1) rotate(5deg);
 }
 100% {
   background-color: red;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
 }
}

.pulsedbox {
 -webkit-animation-name: pulse;
 -webkit-animation-duration: 4s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-in-out;
}

Ключевые кадры обозначены с использованием процентов от общей продолжительности анимации, всего мы обозначили 4 таких кадра. Правила “from” и “to” эквиваленты значениям “0%” и “100%” соотвественно.

CSS анимация – одно из дополнений к CSS, разработанных для Webkit, которое входит в список так называемых CSS эффектов. Цель внедрения – прежде всего, расширить возможности веб-разработчиков для реализации контента, более насыщенного графическими элементами и эффектами. Анимация сама по себе очень презентабельна, а значит имеет право стать частью привычных нам стилей. Разработанное решение позволяет вебмастерам создать полноценную анимацию, заменив огромные и тяжелые для восприятия коды на JavaScript.

Другая хорошая новость – Webkit теперь также поддерживает CSS эффекты и на IPhone!

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

Вы можете найти еще больше примеров на сайте Aplle центра разработки веб-приложений.