Fed up with ‘Flash’? Getting annoyed with animated gifs? Well, why not try an alternative – CSS Flick Animation.
This is a method of animation that requires some interaction with your visitors, making a visit to your web site a more enjoyable experience for them, and maybe tempting them to come back for more.
The animations normally appear as static images on the page but they will spring into life when you move your mouse across them. This can be used in many serious applications as well as just for fun.
With this article I will show you how to style a basic animation (and also an enhanced version which comprises the same animation with associated text). This could be used on an educational site to explain the various stages of the animation (such as the internal combustion engine).
FLICK ANIMATION is 100% CSS and DOES NOT use javascript
For this article I thought that it would be apt to use a series of still images taken by Eadweard Muybridge, a pioneer photographer of the moving image, 1830-1904.
The initial set of images is freely available on the web and can be seen here IMAGE and is a 69kB jpg file.
The first thing I need to do is divide this composite image into it’s individual frames and ensure that each image is the same size.
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5
Frame 6
Frame 7
Frame 8
Frame 9
Frame 10
Frame 11
Frame 12You will notice that these images are saved in .jpg format as this takes up a smaller file size and with Flick Animation we can use ANY image format or indeed a mixture of any format.
If these images were saved in as gifs and combined into an animation (without frame 12) they would look like this:
and would have a file size of approximately 108kB. The combined file size of our twelve jpg images is approximately 60kB.