CSS Animations

CSS Animations


CSS Animation 
Where CSS transitions provide an animated transition from a start state to an end state, animations provide animated transitions between any arbitrary number of states
Like transitions, animations are specified by the properties that change. Instead of being specified in a property like transition, they are specified in special at-rules - 
@keyframes. 
The @keyframes rule defines the various CSS properties to be applied at given steps during the animation, and the browser will automatically animate between these states.
 A @keyframes rule is given an identifier and contains two or more blocks of CSS properties. Each block is labeled with a percentage representing a fraction of the total animation duration.
An Example is shown - 
Example - 
the element’s background color will change from red to blue to green.
@keyframes colors {
0% {
background: red;
}
50% {
background: blue;
}
100% {
background: green;
}
}
Here, we are defining a @keyframes rule named colors.
The initial state of an element using this animation will have a background color of red. At the halfway point of the animation, it will have a color of blue. 
Finally, at the end state, it will have a color of green. Like with transitions, the browser will automatically calculate all the intermediate colors for the animation. 0% can be replaced with the keyword from, and 100% can be replaced with the keyword to, but this is optional and has the same meaning. 
Once an animation is defined in a @keyframes rule, we have to use it with an element. The @keyframes rule is referenced in the animation property of a regular CSS rule.
Example - 
<style>
@keyframes colors {
0% {
background: red;
}
50% {
background: blue;
}
100% {
background: green;
}
}
.box {
animation: colors 2s;
width: 10rem;
height: 10rem;
}
</style>
<div class="box"></div>
The animation property can take many forms, as it is a shorthand for several animation-related properties. Here are some examples - 
• animation: color 2s ease-in-out 2s both 
• animation: pulse 2s linear infinite. 
When using the shorthand animation property, you can specify the values in almost any order, and the browser will figure out which argument means what. The one exception to this is the duration and delay. The first time value encountered is treated as the duration, and the second is treated as the delay.
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 -