Переходы

CSS transitions — плавное изменение свойств при смене состояния. transition: property duration timing-function delay. Например: transition: background 0.3s ease — фон плавно меняется за 0.3 секунды. Переходы работают при hover, focus, class change и других триггерах.

Синтаксис: transition: property duration timing-function delay;

property: какое свойство анимировать

• all — все свойства (осторожно!)
• background — только фон
• transform — трансформации
• opacity — прозрачность

duration: как долго

• 0.3s — 0.3 секунды
• 300ms — 300 миллисекунд

timing-function: скорость

• ease (по умолчанию) — медленно в начале и конце
• linear — равномерно
• ease-in — разгон
• ease-out — торможение
• ease-in-out — разгон + торможение
• cubic-bezier(x1,y1,x2,y2) — кастомная кривая

delay: задержка перед началом

• 0s — без задержки
• 0.5s — полсекунды задержки

Свойства, которые анимируются:

• background, color, border-color
• opacity, box-shadow
• transform (rotate, scale, translate)
• width, height (осторожно!)
• margin, padding (осторожно!)

НЕ анимируются:

• font-family (не анимируется плавно)
• display (переключение без анимации)
• position

Transition — как плавный переход в фильме. Не «было так → стало так», а «плавно превратилось из одного в другое». Duration — длительность перехода. Timing — стиль (резко, плавно, с задержкой).

**Самый простой:**

button {
  background: #3498db;
  transition: background 0.3s ease;
}

button:hover {
  background: #2980b9;
}

Простейший transition: плавная смена фона при hover.

**Простой:**

/* Кнопка с transition */
.btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #3498db;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52,152,219,0.4);
}

/* Карточка */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Задержка */
.nav-item {
  transition: color 0.2s ease 0.1s; /* 0.1s задержка */
}

Кнопка с hover-эффектом, карточка с тенью, задержка.

**Реальный пример:**

/* Меню-гамбургер */
.hamburger {
  width: 30px;
  height: 20px;
  position: relative;
}

.hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background: #333;
  transition: all 0.3s ease;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }

.hamburger.active span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

/* Подсветка меню */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

Гамбургер-меню и подсветка ссылки — анимация через transition.

**Неправильно:** Использовать transition: all

**Почему:** all анимирует ВСЕ свойства — включая ненужные (font-family, z-index). Медленно и неэффективно.

**Правильно:** Указывайте конкретные свойства: transition: background 0.3s, transform 0.3s.

**Неправильно:** Анимировать width/height

**Почему:** Анимация width/height вызывает reflow (пересчёт layout) — это медленно.

**Правильно:** Для анимации размеров используйте transform: scale(). Для скрытия — max-height.

**Неправильно:** Забывать will-change

**Почему:** Для сложных анимаций can использовать will-change: transform для оптимизации.

**Правильно:** will-change: transform; — подсказка браузеру подготовиться к анимации.

• transition: property duration timing delay
• ease — по умолчанию (разгон + торможение)
• Анимируйте transform, opacity (быстро), не width/height (медленно)
• transition: all — антипаттерн, указывайте конкретные свойства
• Задержка: transition-delay для каскадных эффектов

Назад: Вы знаете адаптивный дизайн (C20) — переходы добавляют отполированность вашему адаптивному интерфейсу.

Вперёд: В следующем уроке (C22) вы изучите CSS-функции: calc(), min(), max(), clamp().