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.

Note: Easing adds flavor to your animation — by providing a curve describing relative velocity of your animation at a particular spot on the time line.

We’ll cover easing and all other CSS animation properties throughout the remainder of this chapter, based on this simple example.

So How Does It Work?

You can animate any CSS property whose physical position, dimensions, angle or color can be changed. Basic animation is surprisingly simple to implement using keyframes.

CSS animation keyframes are specified using the @keyframes directive. A keyframe is simply the element’s state at a single point on animation time line.

CSS animation engine will automatically interpolate between animation keyframes. All you need to do is specify the state of CSS properties at the start and end points of the animation.