Как создать анимацию в приложении?

Продвинутые темы

Анимации в приложении создают через CSS (transitions/animations), Web Animations API, `requestAnimationFrame` или библиотеки (Framer Motion, GSAP). Выбор зависит от сложности и производительности.

Способы

CSS transitions

Плавный переход между состояниями:

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

CSS animations (@keyframes)

Сложные многошаговые анимации:

@keyframes spin { to { transform: rotate(360deg); } }
.loader { animation: spin 1s linear infinite; }

requestAnimationFrame

Императивные анимации, синхронные с кадрами (когда нужен контроль):

function animate(time) {
  el.style.transform = `translateX(${time / 10}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Web Animations API

JS-управление CSS-анимациями:

el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 });

Библиотеки

Framer Motion — декларативные анимации для React.
GSAP — мощные сложные анимации.
React Spring — физически-реалистичные.

Производительность

Анимировать transform и opacity — они идут на composite (GPU), без reflow/repaint.
Избегать анимации width/height/top (вызывают reflow).
Уважать prefers-reduced-motion.

Как выбирать

Простые переходы/hover → CSS transitions.
Циклические/keyframe → CSS animations.
Сложные интерактивные в React → Framer Motion/GSAP.
Точный императивный контроль → rAF.

Коротко для собеседования

Анимации: CSS transitions (переходы, hover), CSS @keyframes (циклические), requestAnimationFrame (императивный контроль), Web Animations API, библиотеки (Framer Motion, GSAP) для сложного в React. Анимировать transform/opacity (GPU, без reflow), уважать prefers-reduced-motion.