Оригинал сообщения
Комментарии: [показать]

Спонсор месяца:

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

---

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

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

[213x298]

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

[549x237]

Прописать правила анимации очень просто. В первую очередь, используйте @-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;

}

[537x506]

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

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

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

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

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

[показать]LIci WP - WordPress crossposting plugin