Переходы (transitions): smooth change of properties on state changes

Краткое введение

Представьте кнопку, которая плавно меняет цвет при наведении, или элемент, мягко увеличивающийся при клике. Это магия CSS-переходов (transitions)! Они превращают резкие изменения свойств в элегантные анимации.

💡 Переходы работают только с анимируемыми свойствами (цвета, размеры, прозрачность и т.д.). Не получится анимировать, например, display: none → display: block.

Основы синтаксиса

Переходы задаются через свойство transition. Минимальный вариант — указать свойство и время анимации:

.button {
  background-color: blue;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: red;
}

Здесь кнопка плавно станет красной за 0.3 секунды при наведении.

Параметры перехода

Свойство transition может включать 4 параметра:

1. property — какое свойство анимировать (all для всех).
2. duration — длительность (например, 2s или 500ms).
3. timing-function — кривая скорости (ease, linear, cubic-bezier).
4. delay — задержка перед стартом (0.5s).

Пример с полным набором:

.box {
  transition: transform 1s ease-in-out 0.2s;
}

Кривые скорости (timing-function)

Этот параметр определяет, как меняется скорость анимации. Популярные значения:

• ease (по умолчанию) — начинается медленно, ускоряется, замедляется.
• linear — постоянная скорость.
• ease-in — начинается медленно.
• ease-out — заканчивается медленно.
• cubic-bezier(x1, y1, x2, y2) — кастомная кривая (попробуйте cubic-bezier.com).

.element {
  transition: width 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

Анимация нескольких свойств

Можно перечислить свойства через запятую или использовать all:

.card {
  transition: 
    transform 0.4s ease-out,
    opacity 0.2s linear;
}

.card:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

⚠️ all может снижать производительность, если элементов много. Лучше явно указывать свойства.

Практический пример: интерактивная кнопка

Создадим кнопку с плавными эффектами:

.btn {
  padding: 12px 24px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: 
    background 0.3s,
    transform 0.2s,
    box-shadow 0.3s;
}

.btn:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn:active {
  transform: translateY(0);
}

Эффекты:
- Поднятие при наведении.
- Тень для глубины.
- Возврат при клике.

Ограничения и советы

1. Производительность: Анимируйте opacity и transform — они не вызывают перерасчёт макета.
2. JavaScript + transitions: Добавляйте/убирайте классы для управления переходами.
3. Тестирование: Проверяйте на мобильных устройствах — иногда анимации могут «тормозить».

Итоги

• Переходы делают интерфейсы живыми и отзывчивыми.
• Используйте transition-property, duration, timing-function и delay.
• Оптимизируйте анимации для плавности.

Теперь — экспериментируйте! 🎨