В чем отличие между свойствами transition и animation в CSS?

Свойства transition и animation в CSS используются для создания анимаций, но имеют разные возможности и сценарии применения:

• transition — позволяет плавно изменять значения CSS-свойств при изменении состояния элемента (например, при наведении). Это простая анимация между двумя состояниями.

• animation — более мощный инструмент, который позволяет создавать сложные анимации с ключевыми кадрами (@keyframes), цикличностью, задержками и управлением временем.

Пример использования transition:

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: red;
}

Пример использования animation:

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.box {
  animation: pulse 2s infinite;
}