Руководство по свойству transition в CSS3

Обычно, когда значение свойства CSS изменяется, результат рендеринга мгновенно обновляется. Типичным примером является изменение цвета фона кнопки при наведении курсора мыши. В обычном сценарии цвет фона кнопки сразу меняется со старого значения свойства на новое при наведении курсора на кнопку.

В CSS3 появилась новая функция перехода, которая позволяет плавно анимировать свойство из старого значения в новое. В следующем примере показано, как анимировать цвет фона background-color HTML-кнопки при наведении курсора мыши.

button {
    background: #fd7c2a;
    /* For Safari 3.0+ */
    -webkit-transition-property: background;
    -webkit-transition-duration: 2s;
    /* Standard syntax */
    transition-property: background;
    transition-duration: 2s;
}
button:hover {
    background: #3cc16e;
}

Вы должны указать как минимум имя CSS-свойства, к которому вы хотите применить эффект перехода, используя CSS-свойство transition-property и продолжительность эффекта transition-duration (больше 0), чтобы осуществить переход. Все остальные свойства transition являются необязательными, так как их значения по умолчанию не предотвращают переход.

Список всех анимируемых свойств есть в Руководство по анимациям в CSS3.

Выполнение нескольких transition

Каждое из свойств transition может принимать более одного значения, разделенных запятыми, что обеспечивает простой способ определения нескольких переходов одновременно с различными настройками.

В примере ниже, свойства background и border будут анимироваться с разной скоростью.

button {
    background: #fd7c2a;
    border: 3px solid #dc5801;
    /* For Safari 3.0+ */
    -webkit-transition-property: background, border;
    -webkit-transition-duration: 1s, 2s;
    /* Standard syntax */
    transition-property: background, border;
    transition-duration: 1s, 2s;
}
button:hover {
    background: #3cc16e;
    border-color: #288049;
}

Сокращенное свойство transition

Есть много свойств, которые следует учитывать при применении переходов. Однако также возможно указать все свойства перехода в одном отдельном свойстве, чтобы сократить код.

Свойство transition является кратким свойством для установки всех отдельных свойств (т. е. transition-property, transition-duration, transition-timing-function, и transition-delay)

При использовании этого свойства важно придерживаться этого порядка для значений.

button {
    background: #fd7c2a;
    -webkit-transition: background 2s ease-in 0s; /* For Safari 3.0+ */
    transition: background 2s ease-in 0s; /* Standard syntax */
}
button:hover {
    background: #3cc16e;
}

Свойства transition

В следующей таблице приведен краткий обзор всех свойств transition: