CSS-переходы

Переходы позволяют вам легко анимировать части вашего дизайна без использования JavaScript.

На самом упрощённом уровне представьте традиционное состояние :hover, в котором вы могли бы изменять внешний вид ссылки при наведении на неё курсора:

a:link {
    color: hsl(36,50%,50%);
}
a:hover {
    color: hsl(36,100%,50%);
}

Это создаёт анимацию; при наведении курсора мыши ссылка меняет цвет с приглушенного оранжевого на насыщенный оранжевый.

Свойство transition, однако, гораздо более мощное, обеспечивающее плавную анимацию (а не переход из одного состояния в другое). Это сокращённое свойство, которое сочетает в себе следующие свойства:
transition-property: какое свойство (или свойства) будет передано.
transition-duration: сколько времени занимает переход.
transition-timing-function: если переход происходит с постоянной скоростью или если он ускоряется и замедляется.
transition-delay: как долго ждать, пока произойдёт переход.

Возвращаясь к свойству shorthand, если переход применяется следующим образом…

a:link {
    transition: all .5s linear 0;
    color: hsl(36,50%,50%);
}
a:hover {
    color: hsl(36,100%,50%);
}

… при наведении курсора мыши на ссылку цвет будет постепенно меняться, а не переключаться внезапно. Свойство transition здесь говорит, что оно хочет, чтобы все свойства переходили линейным образом в течение половины секунды без задержки.

Для выполнения перехода требуется только transition-duration, для остальных по умолчанию используется значение transition-property: all; transition-timing-function: ease; transition-delay: 0;. Таким образом, вы могли бы, например, просто объявить transition: .5s.

Нацеливание на конкретные свойства

Хотя “всё” можно использовать в transition-property (или transition), вы можете указать браузеру только переход к определённым свойствам, просто указав имя свойства, которое вы хотите изменить. Таким образом, предыдущий пример действительно мог включать transition: color .5s ease 0, учитывая только изменения цвета.

Если вы хотите настроить таргетинг более чем на одно свойство (без использования “all”), вы можете предложить список, разделённый запятыми, с transition-property:

a:link {
    transition: .5s;
    transition-property: color, font-size;

Или вы можете предложить множество правил для перехода каждого свойства следующим образом:

a:link {
    transition: color .5s, font-size 2s;

Ослабление

Итак, transition-timing-function (запоминающийся!) — наименее очевидный вариант. Он эффективно определяет, как браузер должен справляться с промежуточными состояниями перехода.

Он повторяет кубическую кривую Безье. Да. Очевидно, мы знаем о них все со школьной скамьи, но, чтобы перейти к делу, на самом базовом уровне вы можете использовать ease или linear.

ease производит постепенное ускорение в начале перехода и постепенное замедление в конце. linear поддерживает постоянную скорость на всем протяжении. Другие значения включают ease-in и ease-out.

CSS-переходы не будут работать в Internet Explorer версий 9 и ниже, но это не будет иметь значения в случаях, когда переходы не являются существенными для хорошей работы дизайна.

Страницы в тему:

Следующая страница: Фоновые изображения: кратные, размер и происхождение
Предыдущая страница: Селекторы атрибутов
Псевдоклассы (Продвинутый урок CSS)
Свойства сокращений (Продвинутый урок CSS)
Свойство CSS: transition
Свойство CSS: transition-property
Свойство CSS: transition-duration
Свойство CSS: transition-timing-function
Свойство CSS: transition-delay

Примеры CSS: