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


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

CSS властивість `transition`

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

  • transition-property

  • transition-duration

  • transition-timing-function

  • transition-delay

Порада:

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

Нотатка:

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

Синтаксис

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

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

transition-property

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

transition-duration

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

transition-timing-function

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

transition-delay

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

initial

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

inherit

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

Значення без задання: all 0s ease 0s
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.transition="all 2s"

Переглядачі

Переглядач
transition

26.0
1.0 -webkit-

10.0

16.0
4.0 -moz-

6.1
3.0 -webkit-

12.10
11.6 -o-

12.0

Переглядач
transition

4.4
2.1 -webkit-

16.0
4.0 -moz-

3.2 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад застосування властивості transition

Простий приклад для демонстрації роботи властивості

Коли елемент <input type="text"> отримує фокус, він повільно змінює свою ширину з 100px до 250px

input[type=text] {


    width: 100px;


    -webkit-transition: ease-in-out width .35s ease-in-out; /* Safari 3.1 to 6.0 */


    transition: ease-in-out width .35s ease-in-out;


}





input[type=text]:focus {


    width: 250px;


}

Наведіть курсор миші на елемент <div>, щоб поступово змінити його ширину з 100px до 300px

div {


    width: 100px;


    -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */


    transition: width 2s;


}





div:hover {


    width: 300px;


}

Коли елемент <input type="text"> отримує фокус, він повільно змінює свою ширину з 100px до 250px

input[type=text] {


  width: 100px; 


  -webkit-transition: ease-in-out width .35s ease-in-out; /* Safari 3.1 to 6.0 */ 


  transition: ease-in-out width .35s ease-in-out; 


} 





input[type=text]:focus { 


  width: 250px; 


}

Наведіть курсор миші на елемент <div>, щоб поступово змінити його ширину з 100px до 300px

div { 


  width: 100px; 


  -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */ 


  transition: width 2s; 


} 





div:hover { 


  width: 300px; 


}

Додаткові посилання