Обычно, когда значение свойства 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 являются необязательными, так как их значения по умолчанию не предотвращают переход.

Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, принимающее значения в виде чисел, длин, процентов или цветов, является анимируемым.

Список всех анимируемых свойств есть в Руководство по анимациям в 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-duration отсутствует, переход не произойдет, поскольку его значение по умолчанию равно 0.

Свойства transition

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

Значение Описание
transition Сокращенное свойство для установки всех четырех отдельных свойств перехода в одном объявлении.
transition-property Указывает имена CSS-свойств, к которым должен применяться эффект перехода.
transition-duration Определяет количество секунд или миллисекунд, которое анимация перехода должна занять для завершения.
transition-timing-function Определяет функцию по которой будет рассчитываться промежуточные значения CSS-свойств, на которые влияет переход.
transition-delay Указывает задержку перед эффектом перехода.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.