① Название свойства transition-property
CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Большинство свойств меняют свои значения за 16 миллисекунд, поэтому рекомендуемое время стандартного перехода — 200ms
.
Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover
. Данный псевдокласс не работает на мобильных устройствах, таких как iPhone или Android. Универсальным решением, работающим в настольных и мобильных браузерах, будет обработка событий с помощью JavaScript (например, переключение классов при клике).
Переходы применяются ко всем элементам, а также к псевдоэлементам :before
и :after
. Для задания всех свойств перехода обычно используют краткую запись свойства transition
.
CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный перечень вы найдёте на этой странице.
Содержание:
1. Название свойства transition-property
2. Продолжительность перехода transition-duration
3. Функция перехода transition-timing-function
4. Задержка перехода transition-delay
5. Краткая запись перехода transition и плавный переход нескольких свойств
6. Примеры переходов для различных свойств
Поддержка браузерами
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. При создании перехода можно использовать как начальное, так и конечное состояние элемента. Свойство не наследуется.
Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют плавного изменения во времени, что связано с пользовательским опытом. Например, при наведении на ссылку мы хотим видеть мгновенную смену цвета ссылки или цвета и стиля подчёркивания. Поэтому переходы следует использовать для тех свойств, к которым действительно нужно привлечь внимание.
transition-property
Значения:
none
- Отсутствие свойства для перехода.all
- Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.- свойство - Определяет список CSS-свойств, перечисленных через запятую, участвующих в переходе.
initial
- Устанавливает значение свойства в значение по умолчанию.inherit
- Наследует значение свойства от родительского элемента.
Синтаксис
CSS
div { width: 100px; transition-property: width; } div:hover { width: 300px; }
Продолжение в следующей статье!