CSS приклад: transition-property

Інформація

Значення за замовчуваннямall
НаслідуєтьсяНі
ЗастосовуєтьсяДо всіх елементів, до псевдоелементів ::before і ::after
Посилання на специфікаціюhttp://dev.w3.org/csswg/css-transitions/#transition-property

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Встановлює ім'я властивості стилю, значення якої буде відстежуватися для створення ефекту переходу.

Синтаксис

transition-property: none | all | <властивість> [,<властивість>]*

Значення

none
Не задано жодної властивості.
all
Всі властивості будуть відстежуватися.
<властивість>
Назва стильової властивості, регістр при її написанні не враховується. При вказанні декількох властивостей вони перелічуються одна за одною через кому.

Об'єктна модель

[window.]document.getElementById("elementID").style.transitionProperty

Браузери

Chrome до версії 26.0, Safari, Android і iOS підтримують нестандартну властивість -webkit-transition-property.

Opera до версії 12.10 підтримує нестандартну властивість -o-transition-property.

Firefox до версії 16.0 підтримує нестандартну властивість -moz-transition-property.

Анімація
Короткий SEO текст: Ця стаття розглядає властивість CSS `transition-property`, яка встановлює ім'я стилевої властивості для створення ефекту переходу між значеннями. Дізнайтеся про синтаксис, значення та підтримку цієї властивості в різних браузерах.

Часті запитання

  • Q: Як використовувати transition-property в CSS?

    A: Задайте transition-property для властивостей, які ви хочете анімувати.

  • Q: Де використовують transition-property в CSS?

    A: Transition-property використовують у CSS для задання властивостей, які мають бути анімовані при зміні стану елемента.

  • Q: Які властивості можна задати для transition-property в CSS?

    A: Можна задати будь-які CSS властивості, які можуть мати числове значення, наприклад: width, height, opacity, background-color тощо.

  • Q: Чи можна використовувати transition-property для анімації тексту в CSS?

    A: Так, transition-property можна використовувати для анімації тексту, наприклад зміна кольору тексту або розміру шрифту.

  • Q: Чи можна задати multiple transition-property в CSS?

    A: Так, можна задати кілька transition-property, розділивши їх комами, для анімації різних властивостей одночасно.