SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Что такое 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 и т.п.).

Свойства CSS Animations
СвойствоДопустимые значенияОписание
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 пресетов:

Чтобы лучше разобраться, попробуйте установить для -moz-animation-timing-function и -webkit-animation-timing-function те или иные значения. В результате скорость выполенения будет то возрастать в начале и уменьшаться в конце, то наоборот. Указывать эти свойства можно как в общем определении, так и для отдельный кейфреймов. Например:

from { top: 99%; left: 0%; background: green; -moz-animation-timing-function: linear; }

В итоге подъем заголовка будет происходить с равной скоростью, без постепенного замедления, как задается в принятом по умолчанию ease.

2011-07-12 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия v. 2.0.2
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2013 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru