Что такое keyframes в CSS?

Question

Accepted Answer

## Роль

`@keyframes` описывает кадры анимации: от/до или проценты промежуточных состояний. Имя связывается через `animation-name`.

```css
@keyframes slide-in {
  from { transform: translateX(-12px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.toast {
  animation: slide-in 200ms ease-out both;
}
```

Можно задать `0%`, `60%`, `100%` для нелинейного сценария. Дублировать имя в разных файлах — конфликт; держите уникальные имена или CSS Modules/hash.

## Итог

Keyframes — сценарий изменения свойств; без них сложные CSS-анимации не собрать.