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

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

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

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