Переходы и трансформации

Оживляем интерфейс: делаем плавные переходы и двигаем элементы без единой строки JavaScript.

transition делает изменение свойства плавным во времени, а transform двигает, поворачивает и масштабирует элемент, не трогая поток страницы.

transition — плавность вместо скачка

Без transition смена свойства происходит мгновенно. Например, при наведении на кнопку цвет меняется рывком. transition растягивает это изменение во времени, и получается плавно.

.btn {
  background: #2575fc;
  transition: background 0.3s;
}

.btn:hover {
  background: #6a11cb;
}

Теперь при наведении синий цвет плавно перетекает в фиолетовый за 0.3 секунды, а при уходе курсора так же плавно возвращается. Запись transition: свойство длительность. Чтобы анимировать сразу всё, что меняется, пишут transition: all 0.3s.

Можно добавить характер движения и задержку:

.card {
  transition: transform 0.4s ease-in-out;
}

ease-in-out — функция плавности: движение мягко стартует и мягко тормозит. Есть и ease, linear, ease-out — они задают «характер» анимации.

transform — двигаем и крутим

transform меняет положение и форму элемента визуально, не сдвигая соседей: место в потоке остаётся прежним. Основные функции:

Функция	Что делает
`translate(x, y)`	сдвигает по горизонтали и вертикали
`scale(n)`	масштабирует (1 — обычный, 1.2 — крупнее)
`rotate(deg)`	поворачивает на угол

.icon:hover {
  transform: rotate(15deg);
}

.thumb:hover {
  transform: scale(1.1);
}

При наведении иконка повернётся на 15 градусов, а превью увеличится на 10%. Соседние элементы при этом не сдвинутся — transform работает «поверх» потока.

transition + transform = живой интерфейс

По-настоящему приятный эффект получается, когда мы соединяем оба свойства: transform задаёт что меняется, а transition делает это плавным.

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-8px); /* приподнять на 8px */
}

Карточка плавно «всплывает» вверх на 8 пикселей при наведении и так же мягко опускается обратно. Этот эффект «парящей карточки» вы видели на сотнях сайтов — и теперь умеете делать его в четыре строки.

Несколько трансформаций сразу

Функции можно перечислять через пробел — они применятся вместе:

.badge:hover {
  transform: scale(1.2) rotate(10deg);
}

Итог

transition растягивает изменение свойства во времени — рывок становится плавным.
transform сдвигает (translate), масштабирует (scale) и поворачивает (rotate) без сдвига соседей.
Связка transition + transform на :hover даёт живые эффекты вроде «парящей карточки».