Разбираем способы анимаций на JavaScript

Расширенные примеры анимаций на JavaScript

Пример 1: CSS @keyframes с динамическим управлением

Создание последовательности: элемент исчезает, затем появляется с другого места.

/* CSS */
@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.5); }
}
@keyframes fadeInFromRight {
  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fade-out {
  animation: fadeOut 0.5s ease-in forwards;
}
.fade-in-right {
  animation: fadeInFromRight 0.5s ease-out forwards;
}

// JavaScript - добавляем классы с таймингом
const box = document.querySelector('.box');
box.classList.add('fade-out');
setTimeout(() => {
  box.classList.remove('fade-out');
  box.classList.add('fade-in-right');
}, 600);

Результат: блок уменьшается и исчезает за 0.5 с, затем через 0.6 с появляется справа с увеличением прозрачности.

Пример 2: requestAnimationFrame с функцией плавности (easing)

Реализация кастомного easing для движения по кривой.

function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}

function animateWithEasing(element, targetX, duration) {
  const startX = 0;
  const startTime = performance.now();
  function step(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easedProgress = easeOutCubic(progress);
    const currentX = startX + (targetX - startX) * easedProgress;
    element.style.transform = `translateX(${currentX}px)`;
    if (progress < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

const box = document.querySelector('.box');
animateWithEasing(box, 400, 2000);

Результат: элемент движется вправо на 400 пикселей за 2 секунды с замедлением в конце (cubic ease-out).

Пример 3: GSAP Timeline для сложной последовательности

Анимация нескольких элементов с наложением и задержками.

const tl = gsap.timeline({ repeat: 1, yoyo: true, ease: 'power1.inOut' });
tl.to('.box1', { x: 100, duration: 0.5 })
  .to('.box2', { x: 100, duration: 0.5 }, '-=0.3') // наложение
  .to('.box3', { opacity: 0, duration: 0.3 }, '+=0.2');

Результат: три блока двигаются с перекрытием. Сначала box1, затем через 0.3 с (параллельно) box2, и через 0.2 с после box2 исчезает box3. Повторяется с реверсом.

Пример 4: Web Animations API с управлением playback

Создание анимации с возможностью паузы, перемотки и реверса.

const el = document.querySelector('.animated-element');
const anim = el.animate([
  { transform: 'rotate(0deg)', background: 'blue' },
  { transform: 'rotate(360deg)', background: 'red' }
], {
  duration: 3000,
  iterations: Infinity
});

// Кнопки управления
playBtn.onclick = () => anim.play();
pauseBtn.onclick = () => anim.pause();
reverseBtn.onclick = () => anim.reverse();
skipBtn.onclick = () => {
  anim.currentTime = anim.effect.getTiming().duration / 2;
}

Результат: элемент вращается и меняет цвет бесконечно. Пользователь может приостанавливать, переворачивать и перематывать на середину.

Пример 5: Комбинация CSS и requestAnimationFrame для прогресс-бара

CSS анимация ширины элемента с точным обновлением через rAF.

<div id="progress-bar" style="width:0%; height:20px; background:green;"></div>

<script>
const bar = document.getElementById('progress-bar');
let start = null;
const duration = 3000;

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = Math.min((timestamp - start) / duration, 1);
  bar.style.width = progress * 100 + '%';
  if (progress < 1) requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>

Результат: зелёная полоса заполняется от 0% до 100% за 3 секунды плавно, без рывков.