css властивість transition-property
Властивість transition-property встановлює ім'я стильової властивості, значення якого буде відслідковуватися для створення ефекту переходу. Найчастіше відслідковується положення курсора.
Дозволено вказувати декілька властивостей, вони перераховуються через кому. Ефект починає працювати, тільки тоді, коли хоча б одна зазначена властивість змінилася.
Можна задавати декілька значень одночасно, розділивши їх комами. Для відслідковування всіх можливих властивостей задайте ключове слово all. Наприклад transition-property: width, color, font-size; означає, що ефект буде застосований лише для цих властивостей.
Якщо задати для transition-property в якості значення універсальну властивість, буде анімовано також всі її під-властивості.
- Порада
-
Завжди вказуйте властивість
автор: Svitlanatransition-duration, якщо цього не зробити тривалість переходу буде0s, тому перехід не матиме ніякого ефекту. - Нотатка
-
Зверніть увагу, що набір властивостей, які можливо анімувати змінюється. Тому Ви мусите уникати включення до списку значень
автор: Svitlanatransition-propertyвластивостей, які не можна анімувати, щоб у майбутньому це не викликало несподівані результати.
Синтаксис
transition-property: none|all|property|initial|inherit;Властивість transition-property може отримувати 5 значень:
-
none -
Властивість не задана. Без задання.
автор: Svitlana -
all -
Всі властивості відслідковуються.
автор: Svitlana -
property -
Назва стильової властивості. При вказівці декількох властивостей вони перераховуються через кому. Примітка: Регістр імені властивості не враховується.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).
автор: Svitlana
| Значення без задання: | all |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.transitionProperty="width,height" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 26 | 16 | 9 | 12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 26 | 16 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
transition-property: width обмежує перехід лише шириною: при наведенні ширина їде плавно, а колір тла стрибає миттєво.
HTML
<div>Наведи: ширина плавно, колір одразу</div>CSS
div {
width: 170px;
padding: 8px;
background: #0172ad;
color: #fff;
transition-property: width;
transition-duration: 1s;
}
div:hover {
width: 300px;
background: #d81b60;
}Динамічний приклад впливу різних значень на анімування елементу
Простий приклад роботи властивості
Коментарі
Коментарів ще немає — будьте першим!