with the help of animation properties in CSS we can control
how the animation will be played throughout.
The animation properties in CSS are -
1) animation-duration : implies the time taken by the animation to finish.Forexample- animation-duration: 6s;
2) animation-direction : implies the direction of the animation.Forexample- the direction in which the horse rides , the car moves , the insects crawls.
3) animation-delay: implies the time after which is the animation starts.Forexample- animation-delay: 3s; means after 3seconds the animation will start.
4) animation-iteration-count: implies how many times the animation will repeat.
5) animation-timing-function: the values can be ease,ease-in, ease-out, linear, ease-in-out.
6) animation-play-state: the values can be paused, running, initial, inherit.
7) animation-name: implies the name of the animation which is assigned by us.
8) animation-fill-mode: it specifies a style for the element when the animation is not playing.The values can be none,forwards, backwards, both, initial and inherit.
9) @keyframes: this is the most important.It specifies the different values of style in different intervals of time.The animation-name is used in @keyframes declaration.
NOTE: the syntax of every single letter, numbers, punctuation mark is very important.