Keyframes
Keyframes are specific frames in a full. They objects in the key frame have specific state and properties. Just frames are everything that comes between the key frames
@keyframes in CSS provides a way to mention keyframes for an animation and control its styles. For example, from and to properties of a key frame defines the start and end styles of the element.
Or with % values to create keyframes at specific percentage of the animation duration.
Animation
Animation generally means creating visual effects by using still images.
animation CSS property allows to create an animation like visual effect by moving an HTML element which is otherwise a still element.
Using this property, we can define the duration of animation, direction of animation, etc.
keyframes isn't a mandatory property of animation. It's necessary only when we want to add additional styles at specific frames.