transition-duration

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


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

Описание

CSS свойство transition-duration указывает, продолжительность анимации перехода в секундах(s) или миллисекундах(ms).

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

Примечание: всегда указывайте значение свойства transition-duration, так как, если его не указать, продолжительность будет равна 0 и никакого эффекта не будет.

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

Синтаксис

transition-duration: время|inherit;

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

Значение	Описание
время	Указывает, сколько секунд(s) или миллисекунд(ms) будет продолжительность анимации перехода.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

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

    #test2 {
      background-color: blue;
      transition-property: width, height;
      transition-duration: 3s, 6s;
    }
    #test2:hover { width: 600px; height: 300px; }
  </style>
</head>
<body>

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

  <div id="test2"></div>

</body>
</html>

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

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