transition

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


12.0+	10.0+	16.0+	26.0+	12.1+	6.1+

Описание

CSS свойство transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства, по существу это означает простейшую анимацию. Например, если ссылка должна менять цвет при наведении на неё курсора, то можно реализовать постепенный переход от одного цвета к другому, вместо моментального изменения. В обоих случаях будет осуществляться переход от одного цвета к другому, но с помощью transition переход можно сделать постепенным. Если браузер не предоставляет поддержку данного свойства, то изменение будет моментальным.

Свойство transition объявляется вместе с остальными стилями элемента. При каждом изменении значения свойства, указанного в качестве целевого, изменения будут происходить постепенно. Чаще всего transition применяется для плавного изменения вида элемента при наведении на него курсора, но также его можно применять совместно с JavaScript (например, если вид элемента был изменён путём добавления класса или иным образом).

Примечание: CSS свойство transition позволяет в одном объявлении устанавливать значения таких свойств, как transition-property, transition-duration, transition-timing-function, и transition-delay. Не забывайте всегда указывать значение для свойства transition-duration, так как, если не указать значение, то продолжительность перехода будет равна нулю и никакого эффекта не будет.

Значение по умолчанию:	all 0 ease 0
Применяется:	ко всем элементам
Анимируется:	нет
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.transition="width 2s"

Синтаксис

transition: property duration timing-function delay|inherit;

Значения свойства

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

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 3s;
    }
    div:hover { width: 600px; }
  </style>
</head>
<body>

  <div></div>
  <p>Наведите на красный квадрат, чтобы увидеть эффект перехода.</p>

</body>
</html>

Результат данного примера:

Наведите на красный квадрат, чтобы увидеть эффект перехода.