Web Animations API (WAAPI)

Обычно анимации на сайте делают двумя путями: либо пишут @keyframes в CSS (отлично для простых вещей), либо подключают тяжелые JS-библиотеки вроде GSAP / Anime.js (когда нужен сложный контроль, паузы, реверс или динамические значения).
Но мало кто помнит про Web Animations API (WAAPI) – нативный браузерный движок, который объединяет силу JS-управления и производительность CSS (анимации выполняются на уровне композитного слоя GPU).
простой пример: анимируем появление элемента по клику

const box = document.querySelector('.box');

document.querySelector('.btn').addEventListener('click', () => {
  // Вызываем нативный метод .animate()
  box.animate(
    // 1. Описываем ключевые кадры (как в @keyframes)
    [
      { transform: 'scale(0.5)', opacity: 0 },
      { transform: 'scale(1.2)', opacity: 0.8, offset: 0.8 }, // offset — это аналог 80% в CSS
      { transform: 'scale(1)', opacity: 1 }
    ], 
    // 2. Настройки тайминга
    {
      duration: 500,        // Длительность в мс
      easing: 'ease-out',   // Функция плавности
      fill: 'forwards'      // Сохранить состояние после окончания
    }
  );
});

Почему это круче, чем просто вешать CSS-классы?
Потому что метод .animate() возвращает объект анимации, которым можно полностью управлять из JS кода:

const myAnimation = box.animate([...], {...});

myAnimation.pause();   // Поставить на паузу
myAnimation.play();    // Запустить снова
myAnimation.reverse(); // Проиграть в обратную сторону
myAnimation.playbackRate = 2; // Ускорить анимацию в 2 раза

// И даже отловить окончание через Промисы!
myAnimation.finished.then(() => {
  console.log('Анимация успешно завершилась, можно удалить элемент из DOM!');
});

#полезнастатья