skip to main content

transition-duration

css

Кратко 🔗

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

Пример 🔗

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

Как пишется 🔗

/* Значения времени */
transition-duration: 6s; /* время в секундах */
transition-duration: 120ms; /* время в миллисекундах */
transition-duration: 0.1s, 15s; /* несколько времён в секундах */
transition-duration: 10s, 30s, 230ms; /* несколько времён в секундах и миллисекундах */

/* Глобальные значения */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;

Как это понять 🔗

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

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

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

.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, padding, transform;
| | | |
transition-duration: .3s, .5s; /* .3s .5s */
}

Подсказки 🔗

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

В работе 🔗

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

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

Автор: Денис,