Чем transition-timing-function ease отличается от cubic-bezier?

Question

Accepted Answer

## В чём суть

`ease` — **готовая кривая**; `cubic-bezier(x1, y1, x2, y2)` — **произвольная** кривая Безье той же модели.

## Детали

`transition-timing-function` задаёт скорость изменения во времени. Ключевые слова:

- `ease` ≈ `cubic-bezier(0.25, 0.1, 0.25, 1)` — мягкий старт и финиш;
- `linear`, `ease-in`, `ease-out`, `ease-in-out` — другие пресеты;
- `cubic-bezier(...)` — полный контроль, в т.ч. «отскок», если y вне [0,1].

```css
.btn {
  transition: transform 280ms ease;
}
.drawer {
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
```

Визуально подбирать кривые удобно в DevTools или на cubic-bezier.com.

## Итог

`ease` — удобный дефолт; `cubic-bezier` — кастомная динамика бренда/моушн-системы. Семантика одна, гибкость разная.