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; 
}

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

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів