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

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая поддерживает это свойство.

Число, непосредственно предшествующее -webkit-, -ms- или -moz-, — это первая версия браузера, которая поддерживает свойство с префиксом.

Определение атрибута и инструкции по использованию

transition-duration — это свойство CSS3, используемое для указания длительности эффекта перехода. Оно определяет продолжительность времени, за которое эффект перехода проходит от начала до конца, делая переход более плавным и естественным.

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

Например, если вы хотите, чтобы эффект перехода длился 1 секунду, можно написать:

.element {
  transition-duration: 1s;
}

Если вы хотите, чтобы эффект перехода длился 500 миллисекунд, можно написать:

.element {
  transition-duration: 500ms;
}

Вы также можете применить несколько эффектов перехода к одному элементу одновременно и указать разную длительность для каждого эффекта перехода. Это можно сделать с помощью значений, разделённых запятыми:

.element {
  transition-property: width, height, opacity;
  transition-duration: 0.5s, 1s, 0.3s;
}

Таким образом, эффект перехода для изменения ширины длится 0.5 секунды, эффект перехода для изменения высоты длится 1 секунду, а эффект перехода для изменения непрозрачности длится 0.3 секунды.

Настраивая свойство transition-duration, вы можете управлять скоростью и плавностью эффектов перехода, создавая тем самым более привлекательные взаимодействия с пользовательским интерфейсом.

Синтаксис