CSS motion overview

In the early days of the web, if one wanted to create any sort of motion, it usually required a folder full of images that had to be individually loaded by the browser. This tended to slow things down to a crawl. The advent of CSS 3 and the use of CSS Sprite sheets has not only sped things up to what seems like warp speed, but also opened up another outlet for the creation of web motion. As you've learned in the previous video, you can move things from here to there. CSS Sprite sheets take those concepts in a significantly more efficient direction than in the past. What does a Sprite sheet look like? It could be something as simple as the three button states in an image on the left or a collection of 15 images in a typical run cycle, where CSS will be used to create, for want of a better term, a flip book of images. A very simple use would be a button rollover in a page. The CSS property for the up state would be background position minus 10 pixels and minus 150 pixels, which moves…