CSS Animations 

Animation allows an element to gradually transition from one CSS style configuration to another. You can change the CSS properties as many times as you want. If you want to use CSS animations, you must first identify some keyframes for the animation, and you also need to decide that keyframes hold what styles the element will have at a given point in time. There are the following types of  animations: –

• animation-name
• animation-duration
• @keyframes
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

1. Animation-name – It is used to define keyframes on which the property will be applied.
2. Animation-duration- It is used to define the interval for which the animation will run.The default value is 0 and rest we can enter the value as we desire.

3. Keyframes- Keyframes are used to change CSS from one style to another style each time. We can use it as from and to or use it as percentage 0% defines the start and 100% defines the end. let’s understand this by an example: –

3. Animation-timing-function- They are used for the speed of the animation. They are some following types of functions – 

• Ease: It’s the default value. It works as a slow start, fast, and then slows at the end.
• Linear: Same speed from beginning to end.
• Ease-in: Start with slow speed.
• Ease-out: End with slow speed.
• Ease-in-out: Start with slow speed and end with slow speed
• Cubic-bezier(n,n,n,n): define your own values.

5. animation-delay– It is used to provide delay for the animation. The value can be both positive and negative.

5. Animation-iteration-count- We use animation-iteration-count to give the animation the number of times, and it will repeat itself.  Its value can be infinite for making animation run continuously.

7. Animation – direction- It is used to define the direction of the animation it will move. There are four types of animation direction as follows:

• Typical: to move animation in forward direction, we normally use its default value.
• Reverse: to move animation in backward direction
• Alternate: to move animation forward first then in the backward direction we use this.
• Alternate reverse: to move animation backward first, then in forward direction we use this.

To use alternate & alternate-reverse, the animation-iteration-count should be more than 1.

 

animation-fill-mode-It is used to specify an animation style before it starts after it ends, or both. It has the following values:

• None: default value, no fill will be applied.
• Forward: the element will retain style value set by last keyframe.
• Backward: the element will retain style value set by the last keyframe.
• Both: will follow both forward and backward.

NOTE: To use fill-mode, one should avoid using animation-direction and shouldn’t keep animation-iteration-count infinite

9. Animation-play-state- Used for playing and pausing the animation. It is of two values: running & pause.

10. Animation shorthand property- The animation shorthand property is as follow:

EXAMPLE: –

animation: example 5s linear 2s infinite alternate

In the above, the sequence is as animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.