В чем разница между ключевыми кадрами и временными функциями в CSS-анимациях?

Разница между ключевыми кадрами и временными функциями в CSS-анимациях заключается в их функциях.

Ключевые кадры (keyframes) — это механизм, который используется для назначения состояний анимации временным меткам, расположенным на временной шкале. hcdev.ru С помощью ключевых кадров описывают, как изменяется внешний вид элемента на протяжении всей анимации. thecode.media Для каждой анимации нужно задать как минимум два ключевых кадра: начальный и конечный. dzen.ru Также можно описать промежуточные кадры, которые задаются с помощью процентов. dzen.ru

Временные функции (animation-timing-function) определяют, как будет происходить анимация: с какой скоростью и ускорением будут меняться свойства, задействованные в ней. dzen.ru С помощью этого свойства можно задать, как будет развиваться анимация между ключевыми кадрами: равномерно, или сначала быстро, потом медленно, или по каким-то сложным внутренним законам. doka.guide

Таким образом, ключевые кадры фокусируются на описании состояний анимации, а временные функции — на определении динамики её выполнения.