Как реализовать анимацию moveLeft?

Question

Accepted Answer

## Предпочтительный путь — CSS

```css
.box {
  transform: translateX(0);
  transition: transform 300ms ease;
}
.box.is-left {
  transform: translateX(-120px);
}
```

```js
el.classList.add('is-left');
```

Через Web Animations API:

```js
el.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(-120px)' }],
  { duration: 300, fill: 'forwards', easing: 'ease' }
);
```

Избегайте анимации `left` (layout thrashing) — лучше `transform`.

## Итог

`transform` + transition/WAAPI; не двигайте через reflow-свойства без причины.