Собесов

Frontend Яндекса — машина Голдберга на CSS (анимации без JS)

Кейсы и метрикиCSS-анимацииСложнаяSenior

Условие

Дана готовая страница с «машиной Голдберга». HTML и базовые стили уже есть. JavaScript использовать нельзя. Вёрстку трогать тоже нельзя — только дописать CSS.

Запуск анимации происходит через чекбокс #start и селекторы состояния (:checked). Дальше — через CSS-анимации и задержки. Цепочка должна устойчиво работать с повторным переключением состояния (запуск/остановка).

Видео-эталон

Точные координаты и тайминги не выводятся — нужно по видео добиться максимально похожего поведения.

Примечание

При запуске скрипт должен оставаться неподвижным, а решение должно быть устойчивым с повторному переключению состояний.

Хочешь увидеть разбор?

Зарегистрируйся бесплатно — откроется развёрнутое решение этой задачи и ещё 4 на выбор.

Зарегистрироваться и увидеть разбор
Уже есть аккаунт? Войти