Какие есть способы анимировать CSS свойства?

Анимировать CSS-свойства можно тремя основными способами: transition, @keyframes и Web Animations API.

transition

Плавный переход между двумя состояниями при изменении свойства:

.button { transition: transform 200ms ease, background-color 200ms; }
.button:hover { transform: translateY(-2px); background-color: #0055ff; }

@keyframes + animation

Анимация с несколькими шагами, повторами и без триггера:

@keyframes pulse {
  50% { transform: scale(1.1); }
}
.badge { animation: pulse 1s ease-in-out infinite; }

Web Animations API

Управление анимацией из JavaScript — пауза, отмена, промисы:

element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 });

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

Дешевле всего анимировать transform и opacity — их обрабатывает композитор без перерасчёта раскладки. Пользователям с prefers-reduced-motion: reduce анимации лучше отключать.

Коротко для собеседования

transition — между двумя состояниями, keyframes — сложные и повторяющиеся анимации, WAAPI — управление из JS; анимируют предпочтительно transform и opacity.

Подробнее: MDN — CSS-анимации