CSS свойство transition-duration

Свойство transition-duration указывает продолжительность анимации перехода.

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

Значение по умолчанию - 0s, т. е. переход не будет иметь эффекта.

Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии), -moz- для Firefox, -o- для более старых версий Opera.

Значение по умолчанию	0s
Применяется	Ко всем элементам, к псевдоэлементам ::before и ::after.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.transitionDuration = "3s";

Синтаксис

transition-duration: time | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 150px;
      height: 100px;
      background: #666;
      -webkit-transition-duration: 2s;
      -moz-transition-duration: 2s;
      -o-transition-duration: 2s;
      transition-duration: 2s;
      }
      div:hover {
      width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-duration</h2>
    <div></div>
  </body>
</html>

Попробуйте сами!

Рассмотрим другой пример со свойством transition-duration:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      body {
      background-color: #fff;
      color: #000;
      font-size: 1em;
      font-family: 'Roboto', Helvetica, sans-serif;
      }
      .example {
      padding: 1em;
      width: 30px;
      height: 30px;
      left: 0;
      background-color: #666;
      position: relative;
      -webkit-transition-property: background-color, left;
      -moz-transition-property: background-color, left;
      -o-transition-property: background-color, left;
      transition-property: background-color, left;
      -webkit-transition-timing-function: linear, linear;
      -moz-transition-timing-function: linear, linear;
      -o-transition-timing-function: linear, linear;
      transition-timing-function: linear, linear;
      }
      .container:hover .example {
      left: 250px;
      background-color: #ccc;
      }
      .el1 {
      -webkit-transition-duration: .3s, .3s;
      -moz-transition-duration: .3s, .3s;
      -o-transition-duration: .3s, .3s;
      transition-duration: .3s, .3s;
      }
      .el2 {
      -webkit-transition-duration: .6s, .6s;
      -moz-transition-duration: .6s, .6s;
      -o-transition-duration: .6s, .6s;
      transition-duration: .6s, .6s;
      }
      .el3 {
      -webkit-transition-duration: 1s, 1s;
      -moz-transition-duration: 1s, 1s;
      -o-transition-duration: 1s, 1s;
      transition-duration: 1s, 1s;
      }
      .el4 {
      -webkit-transition-duration: 2s, 2s;
      -moz-transition-duration: 2s, 2s;
      -o-transition-duration: 2s, 2s;
      transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства transition-duration</h2>
    <div class="container">
      <p>
        <code>transition-duration: .3s, .3s;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-duration: .6s, .6s;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-duration: 1s, 1s;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-duration: 2s, 2s;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
time	Указывает сколько секунд или миллисекунд должен продолжаться эффект перехода. Значение по умолчанию - 0s.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.