skip to content
Advertise here

Flick animation

Example #1

  • frame 1
  • frame 2
  • frame 3
  • frame 4
  • frame 5
  • frame 6
  • frame 7
  • frame 8
  • frame 9
  • frame 10
  • frame 11
  • frame 12
  • frame 1
  • frame 2
  • frame 3
  • frame 4
  • frame 5
  • frame 6
  • frame 7
  • frame 8
  • frame 9
  • frame 10
  • frame 11
  • frame 12

Eadweard Muybridge photographed the first successful serial images of fast motion.

Example #2

  • frame 1
  • frame 2
  • frame 3
  • frame 4
  • frame 5
  • frame 6
  • frame 7
  • frame 8
  • frame 9
  • frame 10
  • frame 11
  • frame 12

Example #3

CSS play Support


CSS play Recommend

Free, practical CSS menus, layouts, and examples

Follow CSS play

Facebook  Twitter  Facebook Fan Page



Just CSS | Designs for the future

Like the CSS Zen Garden?
Then why not visit Just CSS and see it you can design for the future.




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.




  • Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
  • We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London

 

CSS play Testimonial

"The citroen.co.uk 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