Свойство CSS transition

CSS3 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию flash и javascript. Свойство CSS transition является ярким примером одной из таких ситуаций. Думаю, всем известен псевдокласс :hover. При помощи него меняются значения CSS свойств элемента при наведении на него мышкой. К примеру, был блок серого цвета с черной надписью, навел на него мышкой, и он стал черным с белой надписью.

Вот, как это прописывается:

.blok {
 font-size:20px;
 background-color:#808080;
 color:#000000;
 width:325px;
 padding:18px 0;
 cursor:pointer;
 text-align:center;
}
.blok:hover {
 background-color:#000000;
 color:#ffffff;
}

А вот, как это выглядит:

Можно также сделать, чтобы блок при наведении на него, помимо цвета фона и цвета текста, менял также и ширину. Для этого запишем CSS код так:

.blok1 {
 font-size:20px;
 background-color:#808080;
 color:#000000;
 width:325px;
 padding:18px 0;
 cursor:pointer;
 text-align:center;
}
.blok1:hover {
 background-color:#000000;
 color:#ffffff;
 width:355px;
}

Вот, как это будет выглядеть в данном случае:

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

О свойстве transition

Свойство transition придает переходу от одних стилей к другим плавность. К примеру, цвет блока при наведении на него мышкой изменится не резко, а в течение определенного времени. Transition, кстати, в переводе на русский означает «переход». Свойство имеет следующую запись:

div {
 transition:color 1s 1s linear;
}

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

div {
 transition:color 1s 1s linear;
-moz-transition:color 1s 1s linear;
-webkit-transition:color 1s 1s linear;
-o-transition:color 1s 1s linear;
}

В примерах был указан короткий вариант записи, подробный имеет следующий вид:

div {
 transition-property:color;
 transition-duration:1s;
 transition-delay:1s;
 transition-timing-function:linear;
-moz-transition-property:color;
-moz-transition-duration:1s;
-moz-transition-delay:1s;
-moz-transition-timing-function:linear;
-webkit-transition-property:color;
-webkit-transition-duration:1s;
-webkit-transition-delay:1s;
-webkit-transition-timing-function:linear;
-o-transition-property:color;
-o-transition-duration:1s;
-o-transition-delay:1s;
-o-transition-timing-function:linear;
}

В transition-property задается свойство, на которое будет распространяться действие перехода. К примеру: color, background-color, width, height, left, opacity, visibility и многие другие. Можно указать несколько свойств через запятую. Если вы хотите применить переход сразу для всех возможных свойств, тогда у transition-property следует указать значение all. В transition-duration указывается время, в течение которого будет осуществляться переход, в transition-delay время, через которое переход начнется. В transition-timing-function указывается тип перехода, на этом свойстве остановимся подробнее.

Подробнее о transition-timing-function

Свойство transition-timing-function определяет, как будут изменяться промежуточные значения в течение перехода, другими словами, как будет меняться скорость перехода в течение времени, которое задано в свойстве transition-duration. К примеру, переход может начаться быстро, но под конец замедлиться, или же не менять своей скорости в течение всего времени. Transition-timing-function может иметь следующие значения:

• linear — скорость перехода не меняется от начала и до конца. Эквивалентна cubic-bezier(0,0,1,1).
• ease — медленный старт, затем ускорение и замедление в конце. Эквивалентна cubic-bezier(0.25,0.1,0.25,1).
• ease-in — медленный старт. Эквивалентна cubic-bezier(0.42,0,1,1).
• ease-out — замедление в конце. Эквивалентна cubic-bezier(0,0,0.58,1).
• ease-in-out — медленный старт и финиш. Эквивалентна cubic-bezier(0.42,0,0.58,1).
• cubic-bezier(n,n,n,n) — позволяет задать собственные значения от 0 до 1.

Наведите на следующий блок мышкой и посмотрите сами, как осуществляется переход при той или иной функции.

Как видите, в зависимости от того, какое значение имеет свойство transition-timing-function, переход может осуществляться совершенно по-разному. Хотя иногда эта разница является не очень заметной, к примеру, если в transition-duration задано небольшое временное значение, или блок, для которого осуществляется эффект, имеет маленькие габариты и так далее.

Примеры использования свойства transition

Чтобы вам легче было разобраться, как правильно применять свойство transition, приведу несколько примеров. Начну, пожалуй, с самого простого. Помните блок с меняющейся шириной и цветом при наведении на него в самом начале поста? Давайте теперь сделаем тоже самое только с использованием свойства transition.
Пример 1.

.primer_1 {
 font-size:20px;
 background-color:#808080;
 color:#000000;
 width:325px;
 padding:18px 0;
 cursor:pointer;
 text-align:center;
 transition:all 1s linear;
-moz-transition:all 1s linear;
-webkit-transition:all 1s linear;
-o-transition:all 1s linear;
}
.primer_1:hover {
 background-color:#000000;
 color:#ffffff;
 width:355px;
}

В примере была применена линейная функция, далее в посте буду использовать именно ее. Вы же естественно можете применять совершенно любую. В transition-property было использовано значение all, то есть все возможные свойства, а именно цвет фона, цвет текста и ширина, меняли свои значения в течение одинакового времени и с использованием одной и той же функции. Чтобы каждое свойство менялось по-разному, нужно прописывать их через запятую с разными значениями. Вот так:

.primer_1_1 {
 font-size:20px;
 background-color:#808080;
 color:#000000;
 width:325px;
 padding:18px 0;
 cursor:pointer;
 text-align:center;
 transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease;
-moz-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease;
-webkit-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease;
-o-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease;
}
.primer_1_1:hover {
 background-color:#000000;
 color:#ffffff;
 width:355px;
}

В данном случае все свойства меняли свои значения по очереди, начиная с цвета фона и заканчивая шириной. У каждого свойства была задана своя функция.
Пример 2.
С цветами и размерами разобрались. Теперь давайте сделаем исчезающий в движении блок.

.primer_2 {
 font-size:20px;
 background-color:#808080;
 color:#000000;
 width:325px;
 padding:18px 0;
 cursor:pointer;
 text-align:center;
 opacity:1;
 transition:all 2s linear;
-moz-transition:all 2s 0 linear;
-webkit-transition:all 2s linear;
-o-transition:all 2s linear;
}
.primer_2:hover {
 opacity:0;
 margin-left:50px;
}

При помощи свойств opacity и margin-left блок движется и исчезает в течение двух секунд.
Пример 3.
Еще один простой пример. На этот раз у текста появляется тень белого цвета, хотя в данном случае она напоминает скорее подсветку, чем тень, но свойство называется именно так.

.primer_3 {
 font-size:20px;
 background-color:#808080;
 color:#000000;
 width:325px;
 padding:18px 0;
 cursor:pointer;
 text-align:center;
 transition:text-shadow 1s linear;
-moz-transition:text-shadow 1s 0 linear;
-webkit-transition:text-shadow 1s linear;
-o-transition:text-shadow 1s linear;
}
.primer_3:hover {
 text-shadow:0 0 15px #ffffff;
}

Реализовали мы это при помощи свойства text-shadow.
Пример 4.
Немного усложним задачу, заставим блок крутиться.

.primer_4 {
 font-size:20px;
 background-color:#808080;
 color:#000000;
 width:325px;
 padding:18px 0;
 cursor:pointer;
 text-align:center;
 transition:transform 1.5s linear;
-moz-transition:-moz-transform 1.5s 0 linear;
-webkit-transition:-webkit-transform 1.5s linear;
-o-transition:-o-transform 1.5s linear;
}
.primer_4:hover {
 transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

Согласитесь, смотрится неплохо, и сразу даже не догадаешься, что это удалось сделать лишь посредством CSS. В примере, кстати, использовалось еще одно новое свойство transform. Многие браузеры читают его только при помощи вендорных префиксов. Обратите внимание, что их нужно указывать и в значении свойства transition. Обязательно подпишитесь на обновления моего блога, чтобы узнать про свойство transform еще больше. Вскоре ему будет посвящена отдельная статья, как и многим другим свойствам.
Пример 5.
Свойство CSS transition, кстати, неплохо себя показывает и в сочетании с псевдоклассом :active. Блок в данном примере должен будет увеличиваться при нажатии и удержании на нем курсора мыши. Проверим?

.primer_5 {
 font-size:20px;
 background-color:#808080;
 color:#000000;
 width:325px;
 padding-top:18px;
 height:38px;
 cursor:pointer;
 text-align:center;
 transition:all 2s linear;
-moz-transition:all 2s 0 linear;
-webkit-transition:all 2s linear;
-o-transition:all 2s linear;
}
.primer_5:active {
 width:375px;
 height:85px;
}

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

Способов использования свойства CSS transition на самом деле очень и очень много, уверен, в будущем их станет еще больше. Я привел лишь самые простые примеры, чтобы продемонстрировать transition в действии. Ссылки, кстати, на моем блоге меняют свой цвет при наведении на них мышкой именно при помощи него. Думаю, я вам порядком надоел серым прямоугольником, но зато на нем удалось отлично показать все, что я хотел. В сочетании с другими свойствами и графикой transition может вытворять очень красивые вещи. Пробуйте!