Обычно, когда значение свойства 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 Указывает задержку перед эффектом перехода.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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