css властивість transition

CSS властивість transition встановлює ефект переходу між двома станами елемента. Використовується з псевдокласом :hover або :active або якщо стан елементу був динамічно змінений за допомогою JavaScript.

Властивість transition - це універсальна властивість, яка дозволяє одночасно задати чотири значення, які розділені пропуском:

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

правити

Порада

Завжди вказуйте властивість transition-duration, якщо цього не зробити тривалість переходу буде 0s, тому перехід не матиме ніякого ефекту.

автор: NagarD правити

Нотатка

Зверніть увагу, що порядок запису значень для властивості має дуже велике значення.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

transition: property duration timing-function delay|initial|inherit;

Властивість transition може отримувати 6 значень:

transition-property

Ім'я властивості, за якою ми будемо слідкувати. І коли значення цієї властивості зміниться - запуститься ефект переходу.

автор: NagarD

правити

transition-duration

Тривалість ефекту переходу.

автор: NagarD

правити

transition-timing-function

Визначає криву (функцію) ефекту переходу.

автор: NagarD

правити

transition-delay

Затримка ефекту переходу.

автор: NagarD

правити

initial

Встановлює властивість у значення без задання

автор: NagarD

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
transition	26.0 <br>1.0 -webkit-	16.0 <br>4.0 -moz-	6.1 <br>3.0 -webkit-	12.10 <br>11.6 -o-	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
transition	4.4 <br>2.1 -webkit-	16.0 <br>4.0 -moz-	3.2 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<p>Клацни в поле — ширина плавно виросте зі 100 до 250 пікселів:</p>
<input type="text">

input[type=text] {
    width: 100px;
    transition: width .35s ease-in-out;
}

input[type=text]:focus {
    width: 250px;
}

<div>Наведи — розтягнуся до 300px</div>

div {
    width: 100px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    transition: width 2s;
}

div:hover {
    width: 300px;
}

<p>Клацни в поле — воно розшириться з невеликою затримкою:</p>
<input type="text">

input[type=text] {
    width: 100px;
    transition: width .35s ease-in-out .2s;
}

input[type=text]:focus {
    width: 250px;
}

<div>Наведи — виросту й зміню колір</div>

div {
    width: 100px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    transition: width 2s, background-color 1s;
}

div:hover {
    width: 300px;
    background-color: #d81b60;
}