В чем разница между animation-name и ключевыми кадрами @keyframes?

Разница между animation-name и ключевыми кадрами @keyframes заключается в их функциях в процессе создания анимации с помощью CSS. html5book.ru developer.mozilla.org

animation-name определяет список применяемых к элементу анимаций. html5book.ru Каждое имя используется для выбора ключевого кадра в правиле, которое предоставляет значения свойств для анимации. html5book.ru Если имя не соответствует ни одному ключевому кадру в правиле, анимация не будет выполняться. html5book.ru

Ключевые кадры @keyframes, в свою очередь, определяют внешний вид анимации. developer.mozilla.org Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент. developer.mozilla.org Ключевые кадры используют процентные значения, чтобы определить стадию протекания анимации. developer.mozilla.org 0% означает начало анимации, а 100% — её конец. developer.mozilla.org

Таким образом, animation-name фокусируется на выборе анимации, а ключевые кадры @keyframes — на описании последовательности анимации.