Summary

Animating elements on a web page or a site is like crossing a fine line—one wrong foot can turn a site that looks stunning into a real dog's dinner of a mess that will turn off everyone who visits it! Throughout this chapter, we covered the basics of animation and saw how we can use Less to simplify the process. Before we move on to the next chapter, let's take a moment to recap what we learned.

We kicked off with a simple introduction to what makes a good animation before moving on to examine how a CSS animation works. We then explored the different types of animations before covering off the all-important browser support for the technology.

Next, we took a look at how we can simplify the creation of animation styles by reworking a simple animation demo to use Less. We then moved on to create a more real-world example in the form of a simple menu demo, which uses transitions to animate the drop-down elements. With the demo completed, we moved on to examine how we...