Какие знаешь способы реализации Web-анимации

1. CSS Transitions – простые переходы между состояниями.

    .box {
      transition: transform 0.3s ease;
    }
    .box:hover {
      transform: scale(1.1);
    }

2. CSS Animations – ключевые кадры (@keyframes) для сложных анимаций.

    @keyframes slide {
      from { transform: translateX(0); }
      to { transform: translateX(100px); }
    }
    .box { animation: slide 2s infinite; }

3. JavaScript (requestAnimationFrame) – для полного контроля над анимацией.

    function animate() {
      element.style.left = (pos += 1) + 'px';
      if (pos < 100) requestAnimationFrame(animate);
    }
    animate();

4. Web Animations API – нативный JS-API для сложных анимаций.

    element.animate([
      { opacity: 0 },
      { opacity: 1 }
    ], { duration: 1000 });

5. GSAP (GreenSock) – мощная библиотека для продвинутых анимаций.

    gsap.to(".box", { x: 100, duration: 1 });

6. Canvas/SVG-анимации – для графики и интерактивных элементов.

Выбор зависит от сложности, производительности и требований к кросс-браузерности.