CSS-переход - это свойство transition, которое заставляет браузер менять значение другого свойства не мгновенно, а плавно, за выбранное время. Например, фон кнопки при наведении не сразу становится другим цветом, а перетекает в него за полсекунды. Всё это - одна строка CSS, без единой строчки JavaScript.
В этом уроке
Попробуй прямо сейчас: наведи курсор на кнопку и убери его - фон меняется плавно. Теперь замени 1s на 0.1s или на 3s и наведи снова - почувствуешь, как меняется скорость самого перехода.
Что такое CSS-переход
Без transition браузер применяет новое значение свойства мгновенно, одним кадром - как будто щёлкнули выключателем. Свойство transition встаёт между двумя состояниями и растягивает изменение во времени: браузер сам вычисляет промежуточные значения (например, промежуточные оттенки цвета) и показывает их одно за другим, пока не дойдёт до конечного значения.
.btn {
transition: background-color .3s;
}
.btn:hover {
background-color: tomato;
} - фон перетекает в tomato за 0,3 секунды, переход заметен глазу.
Неправильное ожидание - что достаточно просто задать :hover, и переход появится сам:
.btn:hover {
background-color: tomato;
} - без transition фон меняется мгновенно, одним кадром, никакого перехода нет.
Как браузер применяет transition
transition - это сокращённое свойство сразу для четырёх параметров: transition-property (какое свойство анимировать, по умолчанию все), transition-duration (сколько длится переход, по умолчанию 0 секунд), transition-timing-function (кривая скорости, по умолчанию ease) и transition-delay (задержка перед стартом, по умолчанию 0 секунд). Самое важное здесь - значение по умолчанию у длительности: если её не указать явно, переход технически есть, но длится 0 секунд, то есть происходит абсолютно незаметно.
transition: background-color .3s; - длительность указана явно, переход длится 0,3 секунды и виден.
transition: background-color; - свойство для анимации указано, а время - нет; браузер подставит значение по умолчанию 0s, и переход пройдёт мгновенно, будто его вообще не было.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Не указать transition-duration (например, написать просто transition: background-color;) |
Длительность по умолчанию - 0 секунд, переход происходит мгновенно, будто transition не было вовсе | Всегда указывать время явно, например transition: background-color .3s; |
Пытаться анимировать display (например, display: none → display: block) |
У display нет промежуточных значений между none и block, поэтому переход просто не срабатывает, элемент появляется и исчезает мгновенно | Анимировать opacity и видимость вместе, а не сам display |
| Проверять переход на очень коротком наведении и делать вывод, что transition "не работает" | Переход на самом деле идёт, просто курсор убирают раньше, чем он успевает завершиться, и кажется, что ничего не произошло | Увеличить длительность на время проверки или задержать курсор подольше |
Писать transition: all .3s; "для надёжности" на весь сайт |
Браузер начинает отслеживать изменение вообще всех анимируемых свойств элемента, включая случайные (например, ширину при изменении контента), что лишний раз нагружает страницу | Указывать конкретное свойство, которое действительно нужно анимировать |
Шпаргалка
| Свойство | Значение |
|---|---|
| transition-property | Какое CSS-свойство анимировать (по умолчанию all - все сразу) |
| transition-duration | Сколько длится переход (по умолчанию 0s - переход отключён) |
| transition-timing-function | Кривая скорости перехода, например ease, linear (по умолчанию ease) |
| transition-delay | Задержка перед стартом перехода (по умолчанию 0s) |
| transition | Сокращённая запись всех четырёх значений сразу, например transition: background-color .3s ease .1s; |
Коротко: отвечаем на вопросы
Чем отличается transition от animation в CSS?
transition реагирует на изменение состояния - например, наведение курсора или смену класса - и один раз плавно переводит свойство из старого значения в новое. animation работает через @keyframes: может запускаться сама, без внешнего повода, проходить через сколько угодно промежуточных шагов и повторяться - разберём это подробно в группе уроков про @keyframes.
Можно ли анимировать через transition любое CSS-свойство?
Нет. Плавно меняются только свойства с промежуточными значениями - цвет, размер, отступ, прозрачность и похожие. У дискретных свойств вроде display или font-family промежуточного состояния не существует, поэтому они переключаются мгновенно, даже если на них указан transition.
Почему transition не срабатывает, если элемент скрыт через display: none?
display - как раз то самое дискретное свойство из предыдущего вопроса: между none и block у него нет промежуточных состояний, поэтому плавный переход для него физически невозможен. Для анимации появления и скрытия элемента обычно используют opacity и visibility, а к display переходят только в паре с ними.
