CSS animation Property

CSS animation Property


Animation properties - 
As mentioned earlier, the animation property is a shorthand for specifying multiple animation-related properties. Here are some of the more commonly used ones
1. Animation-name
The identifier of the @keyframes rule that defines the animation that should be performed on the element
2. animation-duration 
The total duration of the animation. Can be specified in seconds (s) or milliseconds (ms). 
3. animation-timing-function 
The easing function to use for the animation. 
4. animation-delay 
By default, the animation will start immediately. Specifying an animation-delay will delay the start of the animation by the time given. Can be specified in seconds or milliseconds. A negative value can be given for animation-delay. If a negative time value is given, the animation will start immediately at the given point of elapsed time. For example, if an animation has a duration of 1s, and the delay is given as -500ms, the animation will start immediately at the 500ms mark.
Below is given an example if you try you will observe some interesting behavior. The element cycles through the colors, from red to blue to green over 2 seconds, then it disappears. This is because, by default, the properties applied during the animation are no longer applied once the animation ends, and we didn’t define a background color in the rule for the element. It reverts back to whatever properties were defined on the element. If the .box CSS rule had a background-color of yellow, it would run the animation then turn yellow.
Example
 
<style>
@keyframes color {
from {
background: red;
}
to {
background: blue;
}
}
.animate {
background: yellow;
animation: color 2s;
animation-delay: 2s;
width: 10rem;
height: 10rem;
}
</style>
<div class="animate"></div>
Output -
None
The element is yellow for 2 seconds. It then immediately switches to red, and over the next 2 seconds, it transitions to blue. 
After the animation completes, the background color immediately switches back to yellow. With none, the styles in the keyframes are only applied for the duration of the animation. This is the default behavior
Forwards
The element is yellow for 2 seconds. It then immediately switches to red, and the animation runs over the next 2 seconds, transitioning to blue. After the animation completes, the background color stays blue. With forwards, the styles from the last keyframe of the animation remain applied to the element after the animation ends.
Backwards
The element immediately becomes red, which it remains for the next 2 seconds. Then the animation runs for 2 seconds, transitioning to blue. Once the animation is done, the background color immediately switches back to yellow. With backwards, the styles from the first keyframe are applied during the animation delay period
animation-iteration-count 
By default, an animation runs only once. You can have the animation run several times by giving a number for animation-iteration-count, or you can have it loop forever by specifying the keyword infinite. Interestingly, this value does not have to be a whole number. For example, you can specify animation-iteration-count: 0.5, and the animation will play once to the halfway point only
animation-direction 
Defines whether the animation should run forward (the normal keyword) or backward (the reverse keyword). Other accepted values are alternate (runs the animation forward, then backward) and alternate-reverse (runs the animation backward, then forward).
animation-play-state 
Defines whether or not the animation is currently playing. This could be manipulated with JavaScript to pause and resume an animation, for example. Accepted values are running and paused. When the animation is changed from running to paused, and later changed back to running, the animation will continue from where it left off – it won’t start over from the beginning.
Multiple animations
An element can have multiple animations applied to it. The animation shorthand property, as well as all the other animation properties, supports a comma-separated list of multiple values.
Example - 
Output -
Makes spinning cube -