CSS Animation Tutorial

Subscribe to my newsletter and never miss my upcoming articles

Are you learning CSS animations for the first time? Perhaps you are already familiar with CSS transitions. But even if it's not, then this tutorial is for you.


Examples in this tutorial will be based around following setup:

image.png

Let's take a look at the above figure.

Soon as .animateClass is assigned to element animation will start playing, transforming all properties of that element to target values specified in keyframes rule. To remove animation, remove .animateClass from element.

The class is linked to animationName keyframes by using animation-name property. Value must match the name specified by @keyframes rule. This animation is set to last 3 seconds or 3000ms as specified.

Read the rest of this tutorial at the complete css animation tutorial .