Какие способы реализации анимаций в CSS существуют?

Анимации в CSS позволяют оживить интерфейс без JavaScript и часто работают быстрее, потому что выполняются на уровне браузера. Основных подходов три: transition, @keyframes с animation и transform, который обычно используется вместе с ними.

Transition

Transition описывает плавный переход между двумя состояниями свойства. Он не запускается сам по себе, а срабатывает, когда значение свойства меняется, например при наведении или добавлении класса.

.button {
  background: #3498db;
  transition: background 0.3s ease, transform 0.3s ease;
}
.button:hover {
  background: #2980b9;
  transform: scale(1.05);
}

Keyframes и animation

@keyframes задаёт последовательность кадров, а свойство animation управляет длительностью, задержкой, повтором и направлением. Это подходит для сложных сценариев: появление, пульсация, вращение.

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.loader {
  animation: pulse 1.5s infinite ease-in-out;
}

Transform и производительность

Свойства transform и opacity анимируются на GPU и не вызывают перерасчёт layout, поэтому они предпочтительны для плавных движений. Анимация width, top или left заставляет браузер пересчитывать геометрию и может тормозить.

• transition — для простых реакций на состояние.
• animation — для многошаговых и циклических сценариев.
• transform и opacity — для производительных движений.

Итог: transition применяйте для отзывчивости на действия пользователя, @keyframes — для сложных повторяющихся анимаций, а transform и opacity выбирайте, когда важна плавность и производительность.