Чем отличаются CSS transitions и animations?

Разница триггера

• Transition — плавно интерполирует свойства между двумя состояниями (hover, класс, focus). Нужен триггер изменения.
• Animation — самостоятельный таймлайн через @keyframes: несколько этапов, циклы, задержки, animation-fill-mode.

.btn { transition: background 150ms ease, transform 150ms ease; }
.btn:hover { transform: translateY(-1px); }

@keyframes pulse {
  50% { opacity: 0.6; }
}
.dot { animation: pulse 1.2s ease-in-out infinite; }

Анимируйте transform/opacity для perf. Для a11y — prefers-reduced-motion.

Итог

Transition — отклик на смену состояния; animation — сценарий во времени. Часто используют вместе.