Что такое CSS transitions?

Question

Accepted Answer

## В чём суть

**Transition** плавно интерполирует изменение вычисляемого значения свойства между состояниями (например `:hover`).

```css
a {
  color: #334155;
  transition: color 160ms ease, transform 160ms ease;
}
a:hover {
  color: #0f766e;
  transform: translateY(-1px);
}
```

Ключевые свойства: `transition-property`, `-duration`, `-timing-function`, `-delay` (или shorthand). Не все свойства хорошо анимируются; `display: none` не «переезжает» transition’ом.

## Итог

Transition — реакция на смену состояния; для сценариев с ключевыми кадрами нужен `animation`.