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


Властивість transition-property встановлює ім'я стильової властивості, значення якого буде відслідковуватися для створення ефекту переходу. Найчастіше відслідковується положення курсора.

Властивість `transition-property`

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

Можна задавати декілька значень одночасно, розділивши їх комами. Для відслідковування всіх можливих властивостей задайте ключове слово all. Наприклад transition-property: width, color, font-size; означає, що ефект буде застосований лише для цих властивостей.

Якщо задати для transition-property в якості значення універсальну властивість, буде анімовано також всі її під-властивості.

Порада:

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

Нотатка:

Зверніть увагу, що набір властивостей, які можливо анімувати змінюється. Тому Ви мусите уникати включення до списку значень transition-property властивостей, які не можна анімувати, щоб у майбутньому це не викликало несподівані результати.

Синтаксис

transition-property: none|all|property|initial|inherit;

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

none

Властивість не задана. Без задання.

all

Всі властивості відслідковуються.

property

Назва стильової властивості. При вказівці декількох властивостей вони перераховуються через кому. Примітка: Регістр імені властивості не враховується.

initial

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

inherit

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

Значення без задання: all
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.transitionProperty="width,height"

Переглядачі

Переглядач
transition-property

26.0
1.0 -webkit-

10.0

16.0
1.0 -moz-

6.1
3.0 -webkit-

12.10
11.6 -o-

12.0

Переглядач
transition-property

4.4
2.1 -webkit-

16.0
4.0 -moz-

3.2 -webkit-


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

Приклади


Динамічний приклад впливу різних значень на анімування елементу

Простий приклад роботи властивості

Зміна ширини з плавним переходом ефекту при наведенні миші

div {


   -webkit-transition-property: width; /* Safari */


   transition-property: width;


} 





div:hover { 


  width: 300px; 


}

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