Коротко: transition в CSS — это плавный переход между двумя значениями свойства. Задаётся четырьмя параметрами: какое свойство меняется, за сколько времени, с какой скоростью (плавность) и с какой задержкой. Пример: transition: background .3s ease; — фон плавно меняется за 0,3 секунды.
transition изменения (наведение, фокус, открытие меню) происходят мгновенно и «дёргано». С ним интерфейс становится плавным и «дорогим». Это простейшая анимация без JavaScript.Из чего состоит transition
| Параметр | Что задаёт | Пример |
|---|---|---|
| property | какое свойство | background, all |
| duration | длительность | .3s |
| timing-function | кривую скорости | ease, linear |
| delay | задержку старта | .1s |
Вкладки: примеры
.btn {
background: #003F8F;
transition: background .3s ease;
}
.btn:hover { background: #002a61; }Классика: при наведении фон плавно темнеет. ease — универсальная плавность, подходит почти везде.
.card {
transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,.15);
}Перечисляйте свойства через запятую — так у каждого своя длительность. Использовать all удобно, но может «анимировать» лишнее и тормозить.
ease— плавный старт и финиш (по умолчанию);linear— равномерно, без ускорений;ease-in— медленный старт;ease-out— медленный финиш;cubic-bezier(...)— своя кривая.
Для «приподнимания» карточек хорошо подходит ease-out: быстрый отклик и мягкое завершение.
.menu-item {
transition: opacity .2s ease .05s;
}Задержка перед началом перехода. Используйте редко — пользователь ждёт отклик мгновенно.
transform. Нельзя плавно перейти между display: none и block, а также между height: auto и числом. Для таких случаев нужны другие приёмы (например, max-height или @keyframes).Что анимируется хорошо
| Свойство | Комментарий |
|---|---|
transform |
самое «дешёвое» и плавное |
opacity |
прозрачность, без «дёрганья» |
background-color |
плавная смена цвета |
box-shadow |
аккуратно, не на сотнях элементов |
color |
смена цвета текста |
width, height, margin, top/left анимировать можно, но они «дороже» для браузера — лучше использовать transform.
Практика: три перехода
- Кнопка:
transition: background .3s ease; - Карточка:
transition: transform .25s ease-out; - Меню:
transition: max-height .3s ease, opacity .2s ease;
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Перехода нет | transition задан не на том состоянии | задавать на базовом селекторе |
| Плавно только «туда» | transition указан только в :hover | перенести в базовое правило |
| «Дёргается» вёрстка | анимируется margin/height | использовать transform |
| Тормозит | transition: all на многом |
перечислить нужные свойства |
Проверьте себя
transition: background .3s ease;?
Вопросы и ответы
transition — плавный переход между двумя значениями при изменении состояния. animation с @keyframes — полноценная последовательность кадров, в том числе по кругу.
Нет, display не анимируется. Для плавного появления используют opacity + visibility или max-height.
Для интерфейса 0,15–0,3 секунды. Дольше — ощущается «вязко», короче — незаметно.
Анимация transform и opacity дешёвая. Анимация width, height, margin заставляет браузер пересчитывать раскладку — это заметно на слабых устройствах.
Итоги
transition— плавный переход между значениями свойства.- Параметры: свойство, длительность, кривая, задержка.
- Задавайте его на базовом селекторе, а не только в
:hover. - Анимируйте
transformиopacity— это плавно и быстро.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.