@keyframes rule is like a timeline in CSS. It allows you to specify the style at a specific moment in time.
animation: name duration timing-function delay iteration-count direction fill-mode
Total length of time that the animation takes to complete one cycle.
How an animation progresses through the duration of each cycle.
Delay between the time the element is loaded and the beginning of the animation.
Number of times the animation will repeat, or infinite for looping animations.
Whether or not the animation should alternate directions through the sequence or reset to the starting point.
How an animation applies styles to its target before and after its execution.