Что лучше использовать для бесконечного вращения спиннера: animation или transition?

Transition и animation решают разные задачи. Transition описывает плавный переход свойства из одного состояния в другое и запускается только тогда, когда это свойство реально меняется, например при наведении курсора или добавлении класса. Он не умеет повторяться сам по себе, поэтому для бесконечного вращения не подходит.

Как работает animation

Animation задаётся через @keyframes и может проигрываться автоматически, повторяться и иметь несколько промежуточных состояний. Для спиннера достаточно описать поворот от 0 до 360 градусов и указать infinite.

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

Почему transition не подходит

• Transition требует смены значения свойства, иначе ничего не произойдёт.
• Он не поддерживает повторение и промежуточные шаги.
• Чтобы зациклить вращение через transition, пришлось бы постоянно менять классы через JavaScript, что избыточно.

Transition уместен для hover, раскрытия меню, смены цвета кнопки. Animation — для загрузчиков, пульсаций, скелетонов и любых циклических эффектов.

Итог: для бесконечного вращения спиннера используйте animation с infinite, а transition оставьте для одноразовых изменений состояния.