«
»

CSS3: анимационные переходы с помощью CSS

2011-01-04

CSS3 предусматривает возможность внедрения анимационных переходов в веб-странички непосредственно с помощью стилей. Реализовать это можно с помощью свойства: transition.

Формат:

transition-property: <анимируемое css-свойство>;
transition-duration: <продолжительность>; /* s - секунды, ms - миллисекунды */
transition-timing-function: <тип анимации>;
/* доступны такие типы анимации:
default, linear, ease-in, ease-out, ease-in-out, cubic-bezier (x1, y1, x2, y2) */

Доступна более короткая запись:

transition: <анимируемое css-свойство> <продолжительность> <тип анимации>;
/*можно несколько правил через запятую*/

Рассмотрим пример:
Допустим у нас есть элемент с id равным «block», при наведении на который, он должен плавно изменить свой размер и цвет фона.

#block {
width:100px;
background-color:#FFFFFF;
transition: width 1s, background-color 500ms;
}
#block:hover {
width:150px;
background-color:#FF7700;
}

К сожалению, на сегодняшний день, это свойство плохо поддерживается браузерами. Тем не менее, оно внедряется и можно ожидать, что скоро transition будет иметь полную поддержку. Учитывая тот факт, что это свойство имеет в основном декоративную нагрузку, то его можно использовать уже сейчас. И если «устаревшие браузеры» не будут его поддерживать, то посетитель сайта никакого дискомфорта с юзабили всё равно не почувствует.

Запишем максимально совместимый пример:

#block {
width:100px;
background-color:#FFFFFF;
transition: width 1s, background-color 500ms;
/* (WebKit), для Safari, Chrome */
-webkit-transition: width 1s, background-color 500ms;
/* (Mozilla), для FireFox с 4-й версии */
-moz-transition: width 1s, background-color 500ms;
/* для Opera с 11-й версии */
-o-transition: width 1s, background-color 500ms;
}
#block:hover {
width:150px;
background-color:#FF7700;
}

К сожалению, на сегодняшний день, Internet Explorer 9 не поддерживает transition.

Напоследок хотелось бы привести пару аргументов в пользу анимации, реализованной на CSS, перед анимацией, реализованной на JavaScript:

  • реализовать анимацию на CSS намного проще и быстрее;
  • код на JavaScript занимает на много больше места и часто требует подключения внешних тяжелых фреймворков (таких как jQuery, YUI, …);
  • анимация на CSS будет работать плавнее, быстрее и будет меньше нагружать процессор, так как она реализована встроенными скомпилированными и оптимизированными функциями веб-браузера;
  • код JavaScript станет менее «захламлённым», и будет фокусироваться именно на логической нагрузки веб-страниц;
  • веб-разработчики будут тратить намного меньше времени и усилий.

Более подробно об transition можно почитать на w3.org:
http://www.w3.org/TR/css3-transitions/



Добавить комментарий