CSS3 transition: плавные переходы
Переходы в CSS — это именно то, что помогает «вдохнуть жизнь» в неподвижную и скучную веб-страницу и анимировать ее. Смена одних CSS-стилей другими через заданный промежуток времени и с определенной скоростью — это и есть задача свойства transition
.
Например, вы можете задавать скорость перехода от обычного стиля элемента к стилю в состоянии наведенного курсора, который задается через уже знакомый нам псевдокласс :hover
. Если вы проходили практику в первой части книги, то, наверное, помните, что мы уже применяли кое-где свойство transition для плавной смены цвета ссылок и прозрачности.
Рекомендуем взглянуть на примеры CSS-переходов в нашей отдельной статье.
Как создать переход 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.