Animation is quickly becoming king in web development, more and more websites are using animations to help bring life and keep content fresh. If done correctly, they add an extra layer of experience for the end user; done badly, and the website will soon lose more custom than water through a sieve!

Throughout the course of the chapter, we'll take a look at making the change from writing standard animation, through to using processors such as SASS, and finally, switching to using PostCSS. I can't promise you that we'll be creating complex JavaScript-based demos such as the Caaaat animation (http://roxik.com/cat/—try resizing the window!), but we will see that using PostCSS is really easy when creating animations for the browser.

To kick off our journey, we'll start with a quick look at the traditional animation—how many times have you had to use .animate() in jQuery, over the years? Thankfully, we have the power of CSS3 to help with simple animations, but there was...