Как отлаживать CSS-анимации (не играют или слишком быстрые)?

Question

Accepted Answer

## Чеклист диагностики

1. DevTools → **Animations**: таймлайн, slow-down 10%, replay.
2. Проверьте, применяется ли класс/имя `@keyframes` (опечатки, specificity).
3. `animation: none` или перекрытие другим правилом.
4. Слишком короткий `duration` / нулевой — «не видно».
5. Анимируете `display`? Оно не интерполируется.
6. `prefers-reduced-motion` в ОС выключил анимации.
7. Элемент с `display: none` / нет размера — нечего рисовать.

```css
.box {
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  50% { transform: scale(1.05); }
}
```

Для «слишком быстро» увеличьте duration или смотрите timing-function. Performance: смотрите FPS и paint flashing.

## Итог

Animations panel + проверка имени/свойства/motion-settings закрывают 90% багов. Не гадайте — замедлите и смотрите кадры.