CSS3 transition: плавные переходы

Переходы в CSS — это именно то, что помогает «вдохнуть жизнь» в неподвижную и скучную веб-страницу и анимировать ее. Смена одних CSS-стилей другими через заданный промежуток времени и с определенной скоростью — это и есть задача свойства transition.

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

Как создать переход transition

Чтобы реализовать переход в CSS, необходимо записать два стиля для элемента — начальный и конечный. Также к начальному стилю дописывается свойство transition с необходимыми настройками для осуществления перехода. И, наконец, чтобы воспроизвести переход, понадобится «спусковой крючок», который запустит анимацию. Самый простой пример такого «спускового крючка» — это псевдокласс :hover. В этом случае переход от начального стиля к конечному будет происходить при наведении курсора на элемент. При снятии курсора с элемента конечный стиль будет преобразован обратно в начальный.

С какими стилями срабатывает transition

Во-первых, анимированию поддаются все трансформации (scale(), rotate(), skew() и т. д.). Во-вторых, можно создавать переходы между значениями таких свойств, как color, background, width, height, opacity и т. д. Весь перечень можно посмотреть на сайте W3.org.

Кроссбраузерность

Свойство transition понимают следующие версии браузеров:

• IE 10+;
• Edge 12+;
• Firefox 5–15 (с префиксом -moz-), Firefox 16+ (без префикса);
• Chrome 4–25 (с префиксом -webkit-), Chrome 26+ (без префикса);
• Safari 5.1–6 (с префиксом -webkit-), Safari 6.1+ (без префикса);
• Opera 12.1+.

Мобильные браузеры также хорошо поддерживают данное свойство (оно не работает лишь в Opera Mini). Ранние версии таких мобильных браузеров, как iOS Safari и Android Browser, распознают свойство transition при указании префикса -webkit-.

Для наилучшего обеспечения кроссбраузерности рекомендуется добавлять вендорные префиксы при использовании свойства transition.

Из каких свойств состоит transition

Свойство transition является универсальным: в нем можно записать значения для четырех отдельных свойств сразу. Эти свойства мы будем рассматривать по отдельности. Вот их список:

• transition-property — указывает, для какого стиля будет действовать переход;
• transition-duration — определяет длительность анимации;
• transition-timing-function — скорость хода анимации;
• transition-delay — время ожидания перед началом перехода.

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