WebDesignMagazine.ru – Журнал о веб-дизайне

Использование свойства Transition в CSS3

1

С приходом CSS3, нам стало доступно больше новых функций и свойств CSS, которые используются для различных эффектов, одним из самых интересных и полезных является свойство(property) Transition.

Transition является важным новым явлением в CSS. Это свойство может быть использовано для создания динамического эффекта изменения DIV или CLASS, используя простую структуру:

Этот CSS эффект – отличный способ добавить анимацию на сайте, без использования Javascript или jQuery!

Описываем свойство

Первое, что нам нужно сделать – указать параметры свойства Transition. Наиболее популярные – это ширина(width) и высота(height). Код выглядит следующим образом:

Изменяем размер DIV

Изначально, нам также нужно указать стартовое значение параметра width.

В нашем примере, в параметрах свойства мы будем изменять ширину при наведении курсора. Установим первоначальную ширину DIV в 300px, а при наведении курсора в 640px:

Длительность

Добавляем время, за которое должна быть показана анимация:

Предположим, мы хотим указать время как 0.5 секунды, тогда в нашем примере код будет выглядеть следующим образом:

Функция тайминга

Уже на данном этапе наш код достаточен для достижения эффекта, но мы также можем использовать дополнительные параметры, чтобы сделать эффект еще более привлекательным. Параметр transition-timimg-function позволяет нам замедлить или увеличить скорость анимации. Доступные параметры: ease, ease-in, ease-out, ease-in-out.

В нашем примере мы используем ease-in-out для замедления анимации:

Задержка

Если необходима задержка перед анимацией, можно указать время:

Заключение

Подводя итог, нужно отметить две вещи при использовании Transition. Первое, большинству браузеров необходим префикс при описании CSS (исключения IE10, Opera и Firefox16+):

-moz-transition: для Firefox 15
-webkit-transition: для Chrome и Safari

Следует принять во внимание, что IE9 и предыдущие версии не отображают это свойство вообще.

Второе, для оптимизации кода, следует описывать свойство сокращенным inline кодом:

 

Поделиться:

Об Авторе

Редакция портала WebDesignMagazine.ru -онлайн журнал о веб-дизайне.

  • webdesignmagazine

    2ой коммент