Свойство transition-duration

На предыдущей странице мы узнали о первом свойстве семейства transition из четырех — transition-property, которое позволяет выбирать, на какие свойства будет распространяться переход. Теперь настало время познакомиться со следующим — transition-duration.

Свойство transition-duration определяет, сколько времени должен длиться переход от одного состояния к другому. Именно оно обеспечивает плавность анимации. По умолчанию переход происходит мгновенно.

В качестве значения указывается время в секундах либо миллисекундах. Время записывается целым либо дробным числом, после которого следует приставка s (для секунд) или ms (для миллисекунд). Пробел между числом и приставкой не ставится.

transition-duration: 0.6s; /* эта запись эквивалентна нижней */
transition-duration: .6s; /* ноль перед точкой можно опускать */

Вернемся к нашему примеру из предыдущего урока. Нам необходимо добавить плавность для перехода между стилями ссылки. Предположим, мы хотим, чтобы переход длился одну секунду. Добавим одну строчку к уже готовому стилю:

a {
    display: inline-block;
    width: 200px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    background-color: #9b20ff;
    color: #fafafa;
    transition-property: color, background-color;
    transition-duration: 1s; /* добавляем длительность перехода */
}
a:hover {
    color: #9b20ff;
    background-color: #c9ff20;
    letter-spacing: 2px;
}

Теперь наш переход работает так, как нужно:

Вы наверняка заметили, что мы указали еще один стиль для состояния при наведенном курсоре — это letter-spacing: 2px. Как видно на анимации выше, расстояние между буквами меняется резко, без плавности. Так происходит потому, что мы не указывали это свойство в значении transition-property.

Чтобы сделать плавной смену свойства letter-spacing, можно пойти двумя путями: либо добавить его в список значений transition-property, либо изменить значение transition-property на all. Во втором случае плавный переход станет распространяться на все анимируемые свойства (конечно, в том случае, если они будут добавлены). Ключевое слово all упрощает запись, но оно не подойдет, если нужно исключить какое-то свойство из анимации.

Своя скорость для каждого свойства

Если вы перечислили свойства в transition-property, вы можете указать соответствующую длительность перехода для каждого из них. Порядок указания значений длительности должен соответствовать порядку перечисления свойств. Например:

transition-property: color, background-color, letter-spacing;
transition-duration: 1s, .5s, 2s;

Такая запись будет означать, что свойство color перейдет от своего начального значения к конечному за одну секунду, background-color — за половину секунды, а letter-spacing — за две секунды.

Далее в учебнике: свойство transition-timing-function.