Keyframes

Keyframes general meaning

Keyframes are key frames in a full animation. The objects in a key frame have a set state and set properties. Plain frames are all the frames between the key frames.

@keyframes in CSS lets you set key frames for an animation and control its styles. For example, the from and to properties set the start and end styles of the element.

You can also use % values to set key frames at a given point of the animation.

Animation

Animation - general meaning

Animation means making visual effects from still images.

The animation CSS property creates this effect. It moves an HTML element that's otherwise still.

With this property, you can set the duration, the direction, and more.

keyframes not mandatory

Key frames aren't required for an animation. You need them only to add extra styles at certain frames.