CSS3 как использовать свойство transition?

В этой статье мы разберем, как использовать свойство CSS3 - transition.

Свойство transition дает нам возможность контролировать параметры эффекта перехода.

Как работает свойство transition?

Начнем с простого примера. Создадим блок и укажем ему время продолжительности эффекта перехода.

<div class="transbox"></div>

Эффект перехода поддерживается не во всех браузерах.

Interne Explorer: не поддерживает.

Firefox: -moz-transition.

Safari и Chrome: -webkit-transition.

Opera: -o-transition.

По-этому CSS3 код будет следующий.

.transbox {
    width: 50px;
    height: 50px;
    border:1px solid #333;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
}

Но для того чтобы эффект перехода заработал, нам необходимо добавить стили поведения нашего блока при наведении (:hover) или фокусировки (:focus).

Именно для блока с псевдо-классом :hover (:focus) надо описать свойства которые примет наш блок (элемент) после окончания эффекта перехода.

Добавим же эти стили:

.transbox:hover{
    width: 500px;
    height:50px;
    background: #69c;
    box-shadow: 0 0 10px #333;
}

Результат

 Определения и использование

У эффекта перехода есть четыре свойства:

transition-property, transition-duration, transition-timing-function и transition-delay.

Примечание: Всегда задавайте значение продолжительности перехода transition-duration в противном случае продолжительность будет равна нулю и все прочие эффекты не сработают.

 Синтаксис

transition: property duration timing-function delay;

После того, как мы разобрались с  синтаксисом и посмотрели на небольшом примере, можно и более подробно разобрать каждое из четырех свойств.

1. Transition-property

Давайте в начале посмотрим на синтаксис:

transition-property: none | all | [ <IDENT> ] [, <IDENT> ]*

В качестве значения мы указываем название свойства к которому будет применен эффект перехода. Также мы можем указать несколько свойств разделяя их при этом запятой.

Примеры использования transition-property:

transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color, height, width;

2. Transition-duration

В этом свойстве мы задаем время, необходимое для завершения эффекта перехода.

transition-duration: <time> [, <time>]*

 Примеры использования transition-duration:

transition-duration: 2s;
transition-duration: 4000ms;
transition-duration: 4000ms, 8000ms;

Если указать отрицательное значение, то оно будет восприниматься как ноль.

3. Transition-timing-function

Данное свойство позволяет задать интенсивность выполнения эффекта перехода. Задать временную функцию можно двумя способами: написав название функции или настроить свою временную функцию.

transition-timing-function: <временная функция> [, <временная функция>]*

<временная функция> = ease | linear | ease-in | ease-out | ease-in-out

или

<временная функия> = cubic-bezier(<числоr>, <число>, <число>, <число>)

Пример использования transition-timing-function:

transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.8);

В примере ниже покажем поведение всех временных функций

 4. Transition-delay

Данное свойство позволяет задать задержку перед началом выполнения эффекта перехода.

transition-delay: <time> [, <time>]*

Пример использования:

transition-delay: 5s;
transition-delay: 4000ms, 8000ms;
transition-delay: -5s;

В завершение статьи о эффектах перехода в CSS3 🙂

Еще пару примеров

<div class="transbox2">
	<div class="c-1">c-1</div>
	<div class="c-2">c-2</div>
</div>

.transbox2 div {
    width: 70px;
    height: 50px;
    margin-top: 20px;
    border:1px solid #333;
    border-radius: 10px;
}
.transbox2:hover .c-1{
    width: 500px;
    background: #69c;
}
.transbox2:hover .c-2{
    width: 200px;
    background: #000;
    color:#f00;
    padding:5px 50px 5px 200px;
}
.c-1 {
	-webkit-transition: background 3s ease-out, width 2s ease 3s;
	-moz-transition: background 3s ease-out, width 2s ease 3s;
	-o-transition: background 3s ease-out, width 2s ease 3s;
	-ms-transition: background 3s ease-out, width 2s ease 3s;
	transition: background 3s ease-out, width 2s ease 3s;
}
.c-2 {
	-webkit-transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
	-moz-transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
	-o-transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
	-ms-transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
	transition: width 2s ease-out, 
						background 1s ease 2s,
						color 1s ease-in 3s,
						padding 2s ease-out 4s;
}

Результат

(2 голосов. Рейтинг: 5,00 из 5)

Загрузка...

Метки: CSS3, обзор, стили

Рубрика: CSS