Главная > CSS/Style Sheets > Как использовать CSS3-параметр transition

Как использовать CSS3-параметр transition


4 января 2013, 14:40. Разместил: Design FactoRy
Вместе с объявлением о выходе CSS3 было представлено множество новых функций, которые теперь можно использовать для создания невероятных эффектов. Один из наиболее удобных параметров называется transition.

Как использовать CSS3-параметр transition

Параметр transition – это важное нововведение в CSS. Его можно использовать для создания динамических эффектов, применяемых к div-элементами или классам при помощи простой структуры:

transition: параметр продолжительность тайминг задержка;

Transition в CSS3 – это отличный способ добавить небольшую анимацию на сайт без необходимости заполнять его javascript-библиотеками наподобие jQuery.

Демо

Перед тем, как начать, предлагаем вам ознакомиться с демонстрацией параметра transition в действии.

Параметр

Прежде всего, для того чтобы этот параметр работал, нам нужно использовать стандартные параметры. Очевидно, два наиболее часто применяемых параметра – это ширина и высота. Для того чтобы использовать параметр отдельно, вы можете воспользоваться этим:

transition-property: параметр

Изменение размера

В продолжение, как только параметр будет определен, мы можем указать начальные и конечные значения. В случае когда это значения ширины или высоты, нужно выставить начальные значения параметра, а затем конечные, которые должны быть иными.

Например, здесь мы применили параметр transition к ширине, а затем указали начальное значение ширины, а затем указали конечное значение ширины (которое применяется при наведении на элемент курсора мыши:

#mainheader {
transition-property:width;
width:50px;
}
#mainheader:hover {
width:75px;
}

Продолжительность

Теперь, когда мы определили, как будет трансформироваться параметр и начальное/конечное значения, нам нужно определить продолжительности перехода (transition). Это реализуется за счет определения длины в секундах или миллисекундах, как показано ниже:

transition-duration: продолжительность;

Данный пример формирует следующий код:

#mainheader {
transition-property:width;
transition-duration:0.5s;
width:500px;
}
#mainheader:hover {
width:750px;
}

Это означает, что div mainheader будет расширяться на 250 пикселей за 0.5 секунд.

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

Этого кода достаточно для того, чтобы создать привлекательный эффект, но тем не менее, мы можем пойти дальше, и воспользоваться CSS3-параметром transition с применением функции тайминга. При помощи этого параметра у нас будет возможность изменять значения в момент воспроизведения перехода. Параметр transition по умолчанию выставлен на линейную кривую. Тем не менее, вы можете выставить функции смягчения, кубическую кривую Безье и многое другое. Кубическая кривая Безье позволяет вам определять ваши собственные значения при помощи (n,n,n,n), где n может быть от 0 до 1 (например, линейная может быть (0,0,1,1)).

Использование этого кода в нашем примере даст нам следующее:

#mainheader {
transition-property:width;
transition-timing-function:ease-in-out;
transition-duration:0.5s;
width:500px;
}
#mainheader:hover {
width:750px;
}

Задержка

Более того, на подобии transition-duration, применение параметра transition-delay поможет нам установить задержку перед началом эффекта:

transition-delay: время;

Завершение

Наконец, при использовании CSS3-параметра перехода, важно учитывать две вещи. Во-первых, на данный момент для большинства браузеров необходимо указывать браузерные префиксы (исключением являются разве что браузеры IE10, Opera и Firefox 16+) :

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

(имейте в виду, что IE9 и ниже не поддерживают параметр transition вообще).

Во-вторых, хотя мы и использовали в примере более описательный и понятный вид, рекомендуем вам использовать сокращенные формы. Выглядит это примерно следующим образом:

#mainheader {
-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:500px;
}
#mainheader:hover {
width:750px;
}

Используете ли вы CSS3-параметр transition? Можно ли его сравнить с подобными эффектами на jQuery? Расскажите нам в комментариях.
Вернуться назад