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

@keyframes задаёт промежуточные состояния анимации. Указываешь имя и ключевые кадры: from/to или проценты (0%, 50%, 100%). Привязываешь к элементу через animation-name. Можно контролировать длительность, задержку, easing, количество повторов (infinite), направление (reverse, alternate). Браузер интерполирует значения между кадрами. Для производительности анимируй только transform и opacity — они не вызывают layout и paint.