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

CSS3 transition

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

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

transition: property duration timing-function delay;

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

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

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

transition-property: <em>width;

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

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

#demotransition {

transition-property:width;
width:300px;
}
#demotransition:hover {
width:640px;
}

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

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

transition-duration<em>: duration;

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

#demotransition {
transition-property:width;
transition-duration:0.5s;
width:300px;
}
#demotransition:hover {
width:640px;
}

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

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

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

#demotransition {
transition-property:width;
transition-timing-function:ease-in-out;
transition-duration:0.5s;
width:300px;
}
#demotransition:hover {
width:640px;
}

Задержка

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

transition-delay: <em>time;

Заключение

Подводя итог, нужно отметить две вещи при использовании Transition:

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

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

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

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

#demotransition {
-moz-transition: width ease-in-out 0.5s 0.1s; /* Firefox 15 */
-webkit-transition: width ease-in-out 0.5s 0.1s; /* Chrome, Safari */
transition: width ease-in-out 0.5s 0.1s;
width:300px;
}
#demotransition:hover {
width:640px;
}


#demotransition {
-moz-transition: width ease-in-out 0.5s 0.1s; /* Firefox 15 */
-webkit-transition: width ease-in-out 0.5s 0.1s; /* Chrome, Safari */
transition: width ease-in-out 0.5s 0.1s;
width:300px;
}
#demotransition:hover {
width:640px;
}

Высоких вам конверсий!

03-03-2016