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

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

   css

   Копировать

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

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

   css

   Копировать

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

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

   js

   Копировать

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

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

   js

   Копировать

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

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

   js

   Копировать

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

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

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