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

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

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

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

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

правити

Порада

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

none

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

автор: Svitlana

правити

all

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

автор: Svitlana

правити

property

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
transition-property	26.0 <br> 1.0 -webkit-	16.0 <br> 1.0 -moz-	6.1 <br> 3.0 -webkit-	12.10 <br> 11.6 -o-	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
transition-property	4.4 <br> 2.1 -webkit-	16.0 <br> 4.0 -moz-	3.2 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div>Наведи: ширина плавно, колір одразу</div>

div {
    width: 170px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    transition-property: width;
    transition-duration: 1s;
}

div:hover {
    width: 300px;
    background: #d81b60;
}