/ ↲
    Расширенный поиск

    CSS

    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;
}

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