Simple CSS Animation Tutorial

Let’s turn a yellow square box into a teal circle.

Check out my CSS Book on Amazon for complete CSS reference.

Figure 1: Soon as .animateClass is assigned to an element, animation will start playing. The class has a link to animationName. It must match the name specified by @keyframes rule. This animation is set to last 3 seconds or 3000ms as specified.