Stu Nicholls | CSSplay | CSS flick animation

Information

Example #1

With this little demonstration I bring you a css representation of the old fashioned flick animation which we had as children. The single frame images were held on separate pages of a book and by holding the corner of the book with your thumb you could quickly flick from one page to the next so producing an animated image.

With these examples you move the mouse slowly up OR down between the two arrows to the LEFT of the images to see the animations (hovering over the images will have no effect).

This should work in all browsers including IE5.01 and IE5.5

Oh, and with this method you can have animated jpegs and pngs!

Example #2

These images have been taken from Eadweard Muybridge's series of animation stills.

Scan these images below from left to right.

Example #3

As an animated gif, this cat animation above would be approximately 70K in size.
As a flick animation we can save each frame in .jpg format and the combined file size of the twelve frames is only 36K (and it is more fun than an animated gif).

...and if you have a problem with IE6 and flickering background images then try this animation - let me know if it works ;o)

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.