css властивість transition-property
Властивість transition-property встановлює ім'я стильової властивості, значення якого буде відслідковуватися для створення ефекту переходу. Найчастіше відслідковується положення курсора.
Дозволено вказувати декілька властивостей, вони перераховуються через кому. Ефект починає працювати, тільки тоді, коли хоча б одна зазначена властивість змінилася.
Можна задавати декілька значень одночасно, розділивши їх комами. Для відслідковування всіх можливих властивостей задайте ключове слово all. Наприклад transition-property: width, color, font-size; означає, що ефект буде застосований лише для цих властивостей.
Якщо задати для 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 |
10.0 |
16.0 |
6.1 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| transition-property | 4.4 |
16.0 |
3.2 -webkit- |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад впливу різних значень на анімування елементу
Простий приклад роботи властивості
Зміна ширини з плавним переходом ефекту при наведенні миші
div {
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
}