0Pricing
Frontend Academy · Урок

Переходы: свойство, длительность и тайминг

Добавляйте transition, чтобы плавно анимировать изменения свойств CSS, выбирайте подходящую длительность и функции плавности, например ease-in-out.

«Переходы: свойство, длительность и тайминг» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое переход CSS?

Переход CSS анимирует свойство от одного значения к другому при его изменении — например, при наведении, получении фокуса или переключении класса. Это декларативный механизм: вы указываете CSS, какие свойства и как нужно изменять, а браузер выполняет остальную работу.

Базовый синтаксис

transition: property duration timing-function delay. Можно перечислить несколько переходов, разделив их запятыми.

.btn {
  background: #6366f1;
  transition: background-color 0.2s ease;
}
.btn:hover {
  background: #4f46e5;
}
// Browser smoothly animates the colour change

Значение свойства

Укажите, какие свойства нужно анимировать. Используйте all, чтобы анимировать каждое свойство, допускающее анимацию, — но это может вызвать нежелательные переходы для несвязанных свойств. Для высокой производительности и предсказуемости явно указывайте свойства.

.card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.15s linear;
}

/* Avoid 'all' in most cases */
.risky { transition: all 0.3s; }

Длительность — сколько длится

Указывайте длительность перехода в s (секундах) или ms (миллисекундах). Короткие интервалы (100–200 мс) подходят для микровзаимодействий. Средние (200–400 мс) — для изменений состояния компонентов. Более длительные (400 мс и больше) — для анимаций на уровне страницы.

Функции времени — характер анимации

Функции времени управляют кривой ускорения. Распространённые значения: ease (по умолчанию: медленное начало, быстрое движение в середине, медленный конец), linear (постоянная скорость), ease-in (медленное начало), ease-out (медленный конец), ease-in-out. Пользовательские кривые: cubic-bezier(x1, y1, x2, y2).

.btn { transition: transform 0.2s ease-out; }
.toast { transition: opacity 0.3s ease-in-out; }
/* Custom cubic-bezier from cubic-bezier.com: */
.spring { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

Задержка — когда начинать

Задержка перехода запускает анимацию через указанное время. Используйте её, чтобы разнести запуск нескольких элементов или предотвратить случайные срабатывания при быстром перемещении мыши.

.dropdown-menu {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s; /* 100ms delay */
}
.dropdown:hover .dropdown-menu {
  opacity: 1;
}

Событие transitionend

JavaScript может отслеживать завершение перехода с помощью события transitionend. Это удобно для удаления элементов после плавного исчезновения или запуска следующего шага последовательности.

element.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'opacity' && element.style.opacity === '0') {
    element.remove();
  }
});

Преобразование элементов

Свойство transform использует ускорение GPU и идеально подходит для переходов. Распространённые преобразования: translate(), scale(), rotate(), skew(). Анимация transform и opacity запускает только компоновку — это самый быстрый путь отрисовки.

.card {
  transform: translateY(0) scale(1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}

Какие свойства можно анимировать

Переход можно применить к любому свойству с числовым значением: к прозрачности, цвету, преобразованию, ширине, высоте, внутренним отступам, границе и размеру шрифта. Такие свойства, как display и visibility, не переходят плавно — вместо этого используйте opacity для плавного появления и исчезновения.

Практика: плавное появление модального окна

Модальное окно плавно появляется и увеличивается от немного меньшего размера. Применяйте класс .open с помощью JavaScript; CSS обрабатывает анимацию.

.modal {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.modal.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

Производительность: используйте transform и opacity

Анимация свойств, запускающих компоновку (ширины, высоты, внешнего отступа, верхней и левой координат), требует много ресурсов: браузер пересчитывает компоновку на каждом кадре. Для плавных анимаций с частотой 60 кадров в секунду используйте transform и opacity.

Быстрая проверка

Анимацию какого свойства следует предпочесть для лучшей производительности?

Повторение: переходы CSS

Переход: свойство, длительность, функция плавности, задержка. Анимируйте конкретные свойства, а не «все». Для естественного движения используйте ease, ease-out и ease-in-out. Отслеживайте transitionend, чтобы связывать действия в цепочку. Для производительности используйте transform и opacity. Переключайте классы в JS, чтобы запускать переходы.

Часто задаваемые вопросы

Урок «Переходы: свойство, длительность и тайминг» бесплатный?

Да — полный текст урока «Переходы: свойство, длительность и тайминг» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Переходы: свойство, длительность и тайминг»?

Добавляйте transition, чтобы плавно анимировать изменения свойств CSS, выбирайте подходящую длительность и функции плавности, например ease-in-out. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Переходы: свойство, длительность и тайминг»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Пользовательские свойства CSS: объявление и обновление
  2. Переходы: свойство, длительность и тайминг
  3. Анимации @keyframes
  4. Учет prefers-reduced-motion
← Назад к Frontend Academy