Спонсор месяца:
Отели Петербург - гостиница Серебряный Век в центре.
Меньше года назад, Dave Hyatt, Dean Jackson и Chris Marrin предложили внедрить новые CSS возможности: анимация, трансформация и CSS-константы. Последнее реализовано разработчиками Webkit еще в июне. А вчера на их появилась заметка о том, что теперь в последней версии Webkit внедрена поддержка CSS-анимации.
Чтобы увидеть анимацию в действии установите и откройте . Вы должны увидеть как на фоне картинки падают листья.
Давайте теперь разберем как работает простейшая анимация.
Прописать правила анимации очень просто. В первую очередь, используйте @-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, их необходимо использовать с префиксом -webkit-, хотя в спецификации этот префикс опущен.
Вы можете найти еще больше примеров .
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
