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.
CSS play Recommend
- Web Banner Design
Unique designs from $20 - Website Design
- Web Hosting
Plans start at only $2.99/month - Register Domain Name
- Online PR-Portal Social Media News
Our Press releases you can read on OA News - Pretronics UK
Pre Press Servicing - Myspace layouts and counter
Lyrics, polls, images & backgrounds -Free! - SEO
Free SEO Analysis From SEO Consult - Leading digital agency
Search & social experts to increase traffic - Northstar Hire
Pre book private car hire, Gloucester UK - Phuket guide
A complete guide to Phuket - web designer
- wholesale
- SEO
- www.thai.se
Thailand guide
CSS play Testimonial
"The 
web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth