Как объявить CSS-анимацию?

Два шага

1. Описать кадры в @keyframes.
2. Подключить через animation (или longhand).

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.alert {
  animation: fade-in 300ms ease-out both;
  /* name | duration | timing | fill-mode */
}

Longhand: animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Итог

@keyframes + animation. Для UI-микроанимаций чаще хватает transition; @keyframes — для многошаговых сценариев.