The @keyframes Rule
The @keyframes rule is where you define the actual animation.
When you create a CSS animation, you are basically telling the browser to change the styles of an element from one state to another over a period of time.
You define these states using the @keyframes rule. Inside the @keyframes block, you specify CSS styles for different moments (or "keyframes") during the animation's timeline.
Using from and to
The simplest way to use @keyframes is with the keywords from and to. These represent the starting point (0%) and the ending point (100%) of the animation.
Using Percentages
If you need more control, or if your animation has multiple steps, you can use percentages instead of from and to.
0% represents the start of the animation, and 100% represents the end. You can add as many percentage points in between as you like.
Note: the @keyframes rule only defines the animation. To make an element actually animate, you must bind the animation to that element using the animation properties (which we did). We'll cover this in more detail next.