The @keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is the beginning of the animation, and 100% is when the animation is complete.
eg
@keyframes my move {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
Reference https://www.w3schools.com/cssref/tryit.php?filename=trycss3_keyframes2