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

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

Свойство transition-duration является одним из свойств CSS3.

Можно указать одну или несколько длительностей, разделенных запятыми. Каждая длительность будет применена к соответствующему свойству, определенному CSS transition-property. Список transition-property действует как основной; если длительностей меньше, чем свойств, список длительностей повторяется. Если указано больше длительностей, список укорачивается.

Значение по умолчанию — 0s, что означает отсутствие эффекта перехода.

INFO

Префиксы поставщиков (такие как -webkit-, -moz-, -o-) больше не требуются для современных браузеров, поскольку transition-duration полностью поддерживается во всех текущих версиях.

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

Синтаксис

Значения CSS transition-duration

css

transition-duration: time | initial | inherit;

Пример свойства transition-duration:

Пример кода CSS transition-duration

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #666;
        transition-duration: 2s;
      }
      div:hover {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Пример свойства transition-duration со значением "time":

Еще один пример кода CSS transition-duration

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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;
        transition-property: background-color, left;
        transition-timing-function: linear, linear;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-duration: .3s, .3s;
      }
      .el2 {
        transition-duration: .6s, .6s;
      }
      .el3 {
        transition-duration: 1s, 1s;
      }
      .el4 {
        transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</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>

Try it Yourself »

Значения

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

Практика

Какое утверждение неверно относительно свойства transition-duration?

Его значение по умолчанию равно 0s.Можно указать только одну длительность.Оно может применяться к псевдоэлементам ::before и ::after.

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

Синтаксис ​

Пример свойства transition-duration: ​

Пример свойства transition-duration со значением "time": ​