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

Для реализации такой анимации можно использовать CSS-анимации с ключевыми кадрами (@keyframes) и JavaScript для запуска последовательности. Вот пример:

HTML
<div id="block" class="block">Анимируемый блок</div>
<button onclick="startAnimation()">Запустить</button>

CSS
.block {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-50px); }
}

@keyframes flyAway {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(200px, -200px) scale(0.5); }
}

JAVASCRIPT
function startAnimation() {
  const block = document.getElementById('block');
  
  // Шаг 1: подпрыгивание
  block.style.animation = 'bounce 0.6s ease-in-out 2';
  
  // Шаг 2: изменение цвета после подпрыгивания
  setTimeout(() => {
    block.style.background = 'red';
  }, 1200); // 0.6s * 2 = 1.2s
  
  // Шаг 3: улет за экран
  setTimeout(() => {
    block.style.animation = 'flyAway 1s ease-in forwards';
  }, 1800); // 1.2s + 0.6s задержки
}

Пояснение:

• bounce - анимация подпрыгивания с двумя циклами (через animation).

• Изменение цвета выполняется через setTimeout после завершения подпрыгивания.

• flyAway - анимация улёта с увеличением прозрачности и смещением.

• forwards в последней анимации фиксирует конечное состояние (блок исчезает).

Для более плавного управления можно использовать requestAnimationFrame или библиотеки вроде GSAP, но данный подход прост и не требует зависимостей.