Этап 4 из 19 · ≈ 3 ч

Анимации и переходы

Полезно знать с Junior

transition, keyframes и производительные анимации без рывков.

.button { transition: transform 150ms ease, background-color 150ms; }
.button:hover { transform: translateY(-1px); }

@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
.toast { animation: fade-in 200ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Что важно знать

  • Дёшево анимировать transform и opacity — они обрабатываются на этапе композиции, без пересчёта раскладки. Анимация width, top, margin вызывает layout на каждом кадре — рывки.
  • will-change — подсказка браузеру вынести элемент в отдельный слой; использовать точечно.
  • Для сложных последовательностей — Web Animations API или библиотеки (Motion).
  • Уважать настройку «уменьшить движение» у пользователя.

Критерии освоения

Junior ≈ 3 ч

  • Делает переходы и анимации на transition и keyframes

Практика. Сделать анимации появления модального окна и тоста без JavaScript.

Middle ≈ 3 ч

  • Анимирует только transform и opacity и проверяет плавность в профайлере
  • Учитывает prefers-reduced-motion

Практика. Найти анимацию, вызывающую layout на каждом кадре, переписать её на transform и сравнить профили.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как сделать плавное изменение стиля через CSS transition?Junior

transition плавно переводит свойство из старого значения в новое, когда значение меняется (hover, класс, состояние): transition: transform 200ms ease-out. Задаётся свойство, длительность, функция времени (ease, linear, cubic-bezier) и задержка. Анимировать…

Полный разбор
Как сделать анимацию через @keyframes?Junior

@keyframes имя { from {…} to {…} } (или проценты 0%, 50%, 100%) описывает шаги, свойство animation применяет её: имя, длительность, функция времени, задержка, число повторов (infinite), направление (alternate), fill-mode (forwards — оставить конечное…

Полный разбор
Зачем учитывать prefers-reduced-motion?Junior

У части людей движение на экране вызывает головокружение и тошноту (вестибулярные нарушения), других отвлекает. В системе они включают «уменьшить движение», а сайт узнаёт об этом через медиазапрос prefers-reduced-motion: reduce. В этом режиме убирают крупные…

Полный разбор
Как браузер отрисовывает страницу и чем reflow отличается от repaint?Junior

HTML → DOM, CSS → CSSOM, вместе → дерево отрисовки → layout (геометрия: размеры и позиции) → paint (пиксели слоёв) → composite (сборка слоёв на GPU). Reflow — пересчёт раскладки при изменении геометрии, дорогой; repaint — перерисовка без изменения геометрии…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования