CSS свойство transition

Материал из Энциклопедия о программировании
Перейти к: навигация, поиск

Появившееся в CSS3 универсальное анимационное CSS свойство transition (пер.: переход) позволяет назначать изменения CSS св-тв плавно и в течение некоторого времени, а так же с применением задержек, т.е. устанавливает эффект перехода между двумя состояниями элемента.

Синтаксис

transition: <переход> [, <переход> ]*

Здесь:

<переход> = [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>

Наиболее часто использ. в след. виде:

transition: transition-property transition-duration transition-timing-function;

Примеры использования

transition: all 0.5s ease;
transition: background 0.5s ease, color 0.3s ease;

Универсальность

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

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

Как и во всех прочих универсальных CSS св-вах, порядок указания значений детерминирован. Порядок такой, какой приведён в списке выше.

Св-воНазваниеОписание
transition-property Св-во, к которому применяется анимация Практически любое св-во CSS, которое можно поступательно интерполировать, т.е. это либо св-во, указанное в цифрах (проценты, пиксели, сантименты и пр.), либо цвета.
transition-duration Длительность анимации Время: 0.5s — полсекунды, 60s — минута, и т.д.
transition-timing-function Временная функция, используемая для анимации ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay Задержка анимации Время: 0.5s — полсекунды, 60s — минута, и т.д.

Спецификация

Св-во впервые было описано в спецификации CSS3, поэтому к нему так же применяются клиентские префиксы вендоров: -moz-, -o-, -webkit-. Хотя большинство современных браузеров легко определяют это св-во и без указаний обособленных префиксов.