Свойство transition в CSS

Свойство transition (переход) позволяет элементам изменять значения в течение определенного периода времени, анимируя изменения свойств.

transition — это краткосрочное действие для которого есть четыре связанных с переходом свойств:

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Ниже простой пример, который меняет цвет фона элемента <div> при наведении (hover:):

div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

При наведении указателя мыши на <div> потребуется полсекунды, чтобы изменить цвет с красного на зеленый.

Вы можете указать конкретное свойство, как мы это делали выше, или использовать значение all для ссылки на свойства перехода.

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
div:hover {
  background: green;
  padding: 20px;
}

В этом примере выше, и к фону (background) и к отступу (padding) будет применен переход (transition), благодаря значению “all” использованному в свойстве transition-property.

Вы можете разделять наборы значений запятыми, чтобы выполнять разные переходы для разных свойств:

div {
  transition: background 0.2s ease,
              padding 0.8s linear;
}

По большей части порядок значений не имеет значения — если только не указана задержка. Если вы указываете задержку, то сначала необходимо указать ее продолжительность.

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

Любое последующее действительное значение времени будет использоваться как задержка.

Некоторые свойства не могут меняться, так как они не являются анимируемыми свойствами. Для того, чтобы понять какие свойства можно анимировать, а какие нет — лучше всего сверять с официальной Документацией.

Информация. Указав переход для элемента, вы определяете, что переход будет происходить в обоих направлениях. То есть, когда стили элемента изменяются, например, при наведении курсора, то его свойства изменяются согласно transition, а когда курсор убираются, то и стили возвращаются к первоначальному состоянию с таким же переходом.

Например, следующий пример показывает как происходит переход при наведении мыши, но не срабатывает, когда курсор убирается.

Это происходит потому, что переход был перемещен в селектор состояния :hover, и в селекторе нет соответствующего перехода, который нацелен непосредственно на элемент без состояния :hover.

Для совместимости во всех поддерживаемых браузерах необходимы префиксы производителя со стандартным синтаксисом, объявленным последним:

.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

IE10 (первая стабильная версия IE с поддержкой перехода) не требует префикса -ms-.

Сергей Ермилов