Как реализовать анимацию блока с подпрыгиванием, изменением цвета и улетом за пределы экрана

Что проверяют

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

Как отвечать

Разбейте задачу на три фазы:

• подпрыгивание: @keyframes bounce с translateY и затухающей высотой прыжков. Упругость задаётся animation-timing-function на отдельных кадрах или функцией linear(), которой кривую отскока можно описать точками;
• смена цвета: background-color в тех же или отдельных кадрах. Это перерисовка без пересчёта раскладки. Если важна плавность, поверх кладут псевдоэлемент нужного цвета и анимируют его opacity;
• улёт: translateX(calc(100vw + 100%)) вместе с opacity и animation-fill-mode: forwards, чтобы блок не вернулся на место.

Фазы склеиваются списком в animation с задержкой: animation: bounce .6s ease-out 2, fly .5s ease-in 1.2s forwards. Конец ловите событием animationend, проверяя event.animationName, а не setTimeout с подобранной цифрой. Из JavaScript то же удобно делать через Web Animations API: el.animate(keyframes, { duration: 500, fill: "forwards" }) возвращает объект с промисом finished, и фазы выстраиваются через await.

Обязательный хвост: @media (prefers-reduced-motion: reduce) с упрощённой анимацией и overflow: clip на контейнере, чтобы улетающий блок не рисовал горизонтальную прокрутку.

Где спотыкаются

Анимируют top и left вместо transform. Каждый кадр вызывает пересчёт раскладки, и на мобильном это видно по рывкам.

Хотят, чтобы блок улетал, продолжая подпрыгивать, и вешают две одновременные анимации на transform. Они не складываются: последняя в списке перезаписывает первую, и прыжок пропадает. Решения: обёртка со своей анимацией (внешний блок летит, внутренний прыгает) или animation-composition: add.

Прячут блок через setTimeout с той же цифрой, что в CSS. Стоит поменять длительность в одном месте, и блок исчезает посреди полёта. Туда же will-change: transform, развешанный на всё подряд: он съедает память, а не ускоряет.