Как работают `@keyframes`?

СобеседованиеАнимации и трансформации

Определяют шаги анимации с промежуточными состояниями
from = 0%, to = 100%, можно любые проценты
Привязываются через animation-name

@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 0.5; }
  to { transform: translateX(0); opacity: 1; }
}
.element { animation: slide-in 0.3s ease-out; }