`transition-duration`

За какое время элемент изменится?

Время чтения: меньше 5 мин

Кратко

Скопировано

Когда нам нужно сделать плавное изменение какого-то CSS-свойства, то браузеру нужно понимать, какое время займёт этот переход. Это время указывается в свойстве transition-duration.

Пример

Скопировано

        
          
          .box {  transition-property: color;  transition-duration: 0.3s;}
          .box {
  transition-property: color;
  transition-duration: 0.3s;
}

Как пишется

Скопировано

В качестве значения указывается одно или несколько значений времени в секундах или миллисекундах.

Время в секундах:

        
          
          .selector {  transition-duration: 6s;}
          .selector {
  transition-duration: 6s;
}

Время в миллисекундах:

        
          
          .selector {  transition-duration: 120ms;}
          .selector {
  transition-duration: 120ms;
}

Несколько времён в секундах:

        
          
          .selector {  transition-duration: 0.1s, 15s;}
          .selector {
  transition-duration: 0.1s, 15s;
}

Несколько времён в секундах и миллисекундах:

        
          
          .selector {  transition-duration: 10s, 30s, 230ms;}
          .selector {
  transition-duration: 10s, 30s, 230ms;
}

Как понять

Скопировано

Браузер анимирует изменения свойств при выполнении двух условий:

перечислены свойства, которые нужно анимировать (transition-property);
перечислены времена анимации для этих свойств (transition-duration).

В общем случае количество свойств и количество времён должны совпадать и браузер сопоставляет каждое время каждому свойству из списка в transition-property.

        
          
          .box {  transition-property: color, font-size;                        |       |  transition-duration: .3s,    .5s;}
          .box {
  transition-property: color, font-size;
                        |       |
  transition-duration: .3s,    .5s;
}

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

Времён больше. Лишние отбрасываются:

        
          
          .box {  transition-property: color, font-size;                        |       |  transition-duration: .3s,    .5s, 1s, 2s;}
          .box {
  transition-property: color, font-size;
                        |       |
  transition-duration: .3s,    .5s, 1s, 2s;
}

Времён меньше. Список повторяется с начала:

        
          
          .box {  transition-property: color, font-size, padding, transform;                        |       |           |         |  transition-duration: .3s,    .5s;     /* .3s       .5s */}
          .box {
  transition-property: color, font-size, padding, transform;
                        |       |           |         |
  transition-duration: .3s,    .5s;     /* .3s       .5s */
}

Подсказки

Скопировано

💡 Если время пишется в секундах и оно меньше одной секунды (например, 0.4s), то ноль можно отбрасывать: transition-duration: .4s.

На практике

Скопировано

Денис Ежков советует

Скопировано

🛠 Лучше не экономить символы, и всегда делать количество времён равным количеству свойств. Но если все свойства должны меняться за одно и то же время, то можно и сэкономить 😈:

        
          
          .box {  transition-property: opacity, visibility, transform;  transition-duration: 0.3s;}
          .box {
  transition-property: opacity, visibility, transform;
  transition-duration: 0.3s;
}

Кратко

Пример

Как пишется

Как понять

Подсказки

На практике

Денис Ежков советует

Читайте также

transition

animation-duration

transition-timing-function

`transition`

`animation-duration`

`transition-timing-function`