CSS свойство transition

CSS свойство transition - это сокращенная форма записи для следующих свойств:

Сначала необходимо установить свойство transition-duration, так как по умолчанию будет указано 0, и свойство не будет иметь эффекта.

Свойства указываются через запятые.

Если количество переходов больше одного и свойство transition-property одного из них установлено как "none", декларация будет недействительной.

Свойства transition позволяют установить переход между двумя состояниями элемента. Могут быть указаны разные состояния, используя псевдоклассы :hover или :active, или же с помощью JavaScript.

Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии),-moz- для Firefox,-o- для более старых версий Opera.
/tbody>
Значение по умолчанию all 0s ease 0s
Применяется Ко всем элементам, к псевдоэлементам ::before и ::after.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис Object.style.transition = "all 3s";

Синтаксис

transition: transition-property | transition-duration | transition-timing-function |  transition-delay | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 150px;
      height: 100px;
      background: #8ebf42;
      -webkit-transition: width 2s;
      -moz-transition: width 2s;
      -o-transition: width 2s;
      transition: width 2s;
      }
      div:active {
      width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition</h2>
    <p>Нажмите и удержите, чтобы увидеть эффект перехода.</p>
    <div></div>
  </body>
</html>

CSS свойство transition property

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      body {
      background-color: #fff;
      color: #000;
      font-size: 1em;
      font-family: 'Roboto', Helvetica, sans-serif;
      }
      .element {
      padding: 20px;
      width: 50px;
      height: 50px;
      left: 0;
      background-color: #8ebf42;
      position: relative;
      -webkit-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      -moz-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      -o-transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      transition: left 1s ease-in-out, background-color 1s ease-out 1s;
      }
      .example:hover .element {
      left: 400px;
      background-color: #1c87c9;
      }
      .element-2 {
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
      transition: none;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition</h2>
    <div class="example">
      <p>Наведите курсор мыши на контейнер и сами увидите результат.</p>
      <div class="element element-1"></div>
      <p>Нет перехода:</p>
      <div class="element element-2"></div>
    </div>
  </body>
</html>

Значения

Значение Описание
transition-property Указывает названия свойств перехода.
transition-duration Указывает продолжительность перехода анимации.
transition-timing-function Указывает, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода.
transition-delay Указывает, когда начнется эффект перехода.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
26.0+
1.0 -webkit-
12.0+ 16.0+
4.0 -moz- 49.0 -webkit-
6.1+
3.0 -webkit-
12.1+
15.0 -webkit-

Практикуйте свои знания

Что такое свойство CSS Transition и для чего оно используется?
Считаете ли это полезным?