animation-direction: This property refers to the animation’s behavior between cycles. It’s values include: normal, reverse, alternate, and alternate-reverse.
Normal means that the animation will start from the very beginning on each cycle or iteration. Reverse animations always play backwards, starting at the end every cycle. Alternate animations start at the front, then alternate between going backwards and forwards through the animation. Alternate-reverse means the animation does its first cycle in reverse, then alternates going forward and backward.
animation-duration: How long do you want the animation to last? 0.5 seconds is usually my default. Not too slow, but not too jumpy.
animation-delay: How long do you want to wait for the animation to start? Let the browser know. Declare it in seconds or milliseconds. So, if you want the animation to start halfway through, make it negative.
animation-timing-function: Transitions use the same as timing function. It determines how fast the animation moves depending on how far the progress of the animation is.
animation-iteration-count: How many times you want the animation cycle through.
animation-direction intertwines this property. You can also set it to decimal places; if you set animation to rotate through 360 degrees.
animation-play-state: This property’s main function is keeping track of if the animation is running or paused. It allows you to pause an animation and keep it at it’s current state, then run it from that state.
animation-fill-mode: This property refers to how you want the element to be styled after the animation runs it’s course.