During a CSS animation, the styling of an element can change multiple times. Thus, whenever you're creating an animation, you need to define certain points called CSS keyframes at which the element will change the styling. Animations are normally gradual transitions from one set of CSS styles to another. You can specify CSS keyframes in two ways:
Using percentages (0% for the starting and 100% for the ending point of the animation)