CSS Animations

 CSS Animations topics at a glance

1) CSS animations is a journey of an element from one state to another in a period of time.

2) Example 1:

Eventually it will turn back to its' original state.

2) Example 2:

Output will start from 10x10 px dimensions and then becomes 100x100px in dimensions and will stay in 100x100px, as it was the original dimension.

3) Example 3:

4) Example 4: Using animation-iteration-count: property;

This property will allow us to repeat our animations in any number of times specified by the user.

here, our animation will repeat for 5 times.

here our animation will repeat endlessly as the property is set to infinite, animation-iteration-count: infinite;