Stu Nicholls writes about how CSS can be used to create animation from frames using pure CSS.
To come to grips with Flick Animation it is necessary to understand the principle behind it. The images are split (vertically in this article, although horizontally will work equally as well) into equal sized transparent ‘link strips’ which then expand to the full size of the image when the mouse is hovered over them. At the same time the image is moved behind the other ‘link strips’ so that they are still available when the mouse moves over them.
This methods requires a little interaction from the user. The individual images are wrapped in an anchor and the hover attribute of anchor is used to display image associated with it. The actual images can be stacked up horizontally or vertically and are then made visible on the hover action by the user. The hovering action triggers movement or visibilty of the images. An example for this is:
<a href="#no"><img src="f1.jpg" alt="frame 1" /><b>F1</b></a>
This not only ensures reduced total size of the final image files, but this is also independent of third party plugins or client side scripting. The only restriction is that the the DOCTYPE must be one of the Valid DOCTYPE list from W3C. Stu Nicholls has provided code in the article as well as you can view at the CSS and XHTML code here. You can use the Web Development Extension for Firefox to view CSS and experiment with it locally. I have tested it in Mozilla Firefox and Microsoft Internet Explorer.
In context of photo blogs, this can be used very effectively to show slideshows. In WordPress, this can be used in the theme template for posts or pages, wherever you wish to show animation.
Here are couple of more illustrations:
Copyright Abhijit Nadgouda