CSS3 анимация

А занете ли вы, что с появлением CSS3 для создания хорошей анимации на сайте необязательно использовать JavaScript или Flash? Конечно, такая анимация будет работать не для всех браузеров, а только для тех, которые уже поддерживают CSS3. По мне - так это даже хорошо. Нужно идти в ногу со временем. Но если вы захотите кроссбраузерности, то просто дописывайте для других браузеров анимацию в javascript.

Анимация в CSS3 делается посредством свойства transition и разницы стилей обычного селектора и селектора с псевдоклассом :hover. Проще говоря, если к элементу привязан псевдокласс :hover, то смена стиля произойдет моментально при наведении курсора мыши на элемент. Если к элементу привязано CSS свойство transition, то переход стиля произойдет анимированно.

Свойство transition содержит следующие параметры:

• property - css-свойство, которое нужно анимировать. Если анимация должна затронуть все свойства, то используется параметр all. Если анимация не должна происходить, то используется параметр none. По умолчанию используется параметр all.
• duration - время анимации. Задается в секундах (s), или миллисекундах (ms). Значение по умолчанию - 0
• func - функция, которая определяет характер анимации. Определяется кривой Безье третьего порядка, где координаты начальной точки - P0(0.0, 0.0), координаты конечной точки P3(1.0, 1.0), координаты промежуточных точек - P1(x1, y1), P2(x2, y2). Координаты имеют значение от 0 до 1. Может принимать следующие значения:
  • ease - P1(0.25, 0.1), P2(0.25, 1.0).
  • linear - P1(0.0, 0.0), P2(1.0, 1.0).
  • ease-in - P1(0.42, 0.0), P2(1.0, 1.0).
  • ease-out - P1(0.0, 0.0), P2(0.58, 1.0).
  • ease-in-out - P1(0.42, 0.0), P2(0.58, 1.0).
  • cubic-bezier(x1, y1, x2, y2) - P1(x1, y1), P2(x2, y2).
  Значение по умолчанию - ease.
• delay - задержка перед запуском анимации. Измеряется в секундах (s) или миллисекундах (ms). По умолчанию - 0.

К объекту можно прописать несколько анимаций. Для этого параметры свойства transition нужно прописывать через запятую.

Дополнительно имеются свойства, относящиеся к transition:

• transition-property - отвечает за параметр property;
• transition-duration - отвечает за параметр duration;
• transition-timing-function - отвечает за параметр func;
• transition-delay - отвечает за параметр delay.

И немного о кроссбраузерности. Свойство transition для разных браузеров прописывается по разному. При этом параметры свойства задаются для всех одинаково:

• -o-transition - Opera 10.5+
• -moz-transition - Firefox 4.0+
• -webkit-transition - Safari 3.1+, Chrome 1.0+
• -ms-transition - Internet Explorer 10

А теперь применим на практике усвоенные знания, и посмотрим на пример:

В браузерах, поддерживающих CSS3 свойство trandition произойдет плавное изменение цвета блока и его рамки. В неподдерживающих браузерах переход из одного состояния в другое произойдет моментально без анимации. В IE версии ниже 10 вообще ничего не произойдет, так как в IE псевдокласс :hover применим только к ссылкам (в ссылках произойдет моментальное изменение).

Код данного примера:

Итак, анимированный переход из одного состояния в другое делается достаточно просто. Но на момент написания статьи стандарт CSS3 еще только проектируется, и возможны некоторые изменения в свойствах и параметрах. Также не все браузеры поддерживают свойство CSS3 transition, а некоторые поддерживают частично. Поэтому используйте эту возможность обдуманно и дублируйте скриптами для неподдерживающих браузеров (CSS3 анимация ест меньше ресурсов).

И в подарок, некая реализация особой анимации. Попробуем анимировать трансформацию (поворот на 360°, увеличение в 1.5 раза и наклон на 20°):

Код выглядит так:

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

• 1
• 2
• 3
• 4
• 5

CSS3 анимация
Верстка
Скрипты, инструкции, справочники