Свойство CSS transition-property

Свойство CSS transition-property задаёт, какие свойства элемента должны анимироваться при изменении их значений. Оно принимает разделённый запятыми список имён свойств или ключевое слово all для анимирования всех анимируемых свойств элемента.

Само по себе transition-property ничего визуально не делает — оно лишь указывает цели. Также необходимо значение transition-duration больше 0s, чтобы изменение было плавным, а не мгновенным. В большинстве случаев все четыре составляющие задаются одновременно с помощью сокращённого свойства transition; transition-property — это полная форма, к которой прибегают, когда нужно раздельно управлять временем анимации каждого свойства.

transition-property является одним из свойств CSS3.

Что может и что не может переходить

Свойство является анимируемым только тогда, когда CSS знает, как вычислить промежуточные значения от начального до конечного. Как правило:

Анимируемые: всё, что имеет числовое или цветовое значение — width, height, opacity, color, background-color, transform, left/top, font-size, letter-spacing, box-shadow и т. д.
Не анимируемые: дискретные ключевые значения, у которых нет смысловой промежуточной точки — display, position, float, font-family. Их изменение происходит мгновенно, даже если они указаны в transition-property.

Внимание

Не все свойства CSS могут анимироваться. Указание неанимируемого свойства (например, display) не даёт эффекта — изменение просто происходит немедленно.

Информация

Вендорные префиксы (например, -webkit-, -moz-, -o-) больше не требуются для CSS-переходов в современных браузерах.

Начальное значение	all
Применяется к	Всем элементам, псевдоэлементам ::before и ::after.
Наследуется	Нет.
Анимируется	Нет (управляет тем, какие свойства анимируются, но само не анимируется).
Версия	CSS3
DOM-синтаксис	object.style.transitionProperty = "height";

Примечание: В современном CSS рекомендуется использовать сокращённое свойство transition.

Синтаксис

Значения CSS transition-property

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

Пример свойства transition-property:

Пример кода CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: height;
      }
      div:hover {
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Здесь анимируется только height. Поскольку width не указан, он бы изменился мгновенно — именно поэтому важно явно перечислять свойства.

Пример свойства transition-property с анимацией ширины и высоты:

Другой пример кода CSS transition-property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #666;
        transition-duration: 1s;
        transition-property: width, height;
      }
      div:hover {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Два имени свойств разделены запятой. Также можно написать transition-property: all, чтобы анимировать оба одновременно, однако явное перечисление позволяет избежать случайной анимации ненужных свойств.

Пример свойства transition-property с анимацией цвета фона:

Пример transition-property с анимацией цвета фона:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: #666666;
        transition-duration: 1s;
        transition-property: background-color;
      }
      div:hover {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <p>Hover over the element to see the effect.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Пример свойства transition-property с анимацией цвета фона и смещения по горизонтали:

Пример transition-property с анимацией цвета фона и смещения по горизонтали

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        cursor: pointer;
        background-color: #8ebf42;
        position: relative;
        transition-property: background-color, left;
        transition-duration: 1s, 1s;
        transition-timing-function: ease-out, cubic-bezier(.82, .1, .14, 1);
      }
      .element:hover {
        left: 250px;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <p>Hover over the box to see the element's background color and left position offset transition.</p>
      <div class="element"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Обратите внимание, как разделённый запятыми список соотносится по позиции: первое свойство (background-color) использует первую длительность и первую функцию плавности, а второе свойство (left) — вторые значения каждого из них. Такое позиционное сопоставление позволяет каждому свойству анимироваться с собственными transition-duration и transition-timing-function — чего нельзя добиться с помощью ключевого слова all.

Пример свойства transition-property с анимацией шрифта:

Пример CSS transition-property со свойствами letter-spacing, font-size и line-height

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: inline-block;
        font-family: sans-serif;
        transition-duration: 0.6s;
        letter-spacing: 1px;
        font-size: 20px;
        line-height: 28px;
        color: #777777;
        transition-property: letter-spacing, font-size, line-height;
      }
      span:hover {
        color: #0f9881;
        letter-spacing: 6px;
        font-size: 26px;
        line-height: 34px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-property property example</h2>
    <span>Hover over the text to see the effect</span>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание
none	Эффект перехода не применяется.
all	Эффект перехода применяется ко всем свойствам.
property	Задаёт разделённый запятыми список имён CSS-свойств для эффекта перехода.
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Связанные свойства

transition-property — одно из четырёх полных свойств, составляющих переход. Обычно они используются вместе:

transition-duration — продолжительность анимации.
transition-timing-function — кривая ускорения (ease, linear, cubic-bezier).
transition-delay — задержка перед началом анимации.
transition — сокращённое свойство, устанавливающее все четыре за одно объявление.

Практика

Какое утверждение о transition-property верно?

Все свойства CSS могут анимироваться.Можно использовать значение 'all'.Нельзя указывать несколько свойств через запятую.