How to Create Flick Animations with CSS

Introduction

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

Basic Method

Step 1

The images

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.

The Individual Frame Images are displayed below: Frame 1; Frame 2; Frame 3; Frame 4; Frame 5; Frame 6; Frame 7; Frame 8; Frame 9; Frame 10; Frame 11; Frame 12

You 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:

animated gif

and would have a file size of approximately 108kB. The combined file size of our twelve jpg images is approximately 60kB.

Step 2

The !DOCTYPE

Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this most browsers will be thrown into 'quirks' mode which will lead to all sorts of incompatibility problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my current web pages.

Step 3

The general idea behind Flick Animation

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 might be a bit difficult to imagine, but if you take it a step at a time then it's really quite simple.

Step 4

The (X)HTML

Since this is a series of images and NOT a list as such, we can use a simple div to hold the eleven animated images (the twelth image will be the initial stationary image). Once more we will need to enclose the images in links so that Internet Explorer can use the :hover pseudo class.

The (X)HTML is as below.

<div id="film" title="Flick animation">
<a id="f1" href="#nogo"><img src="../images/f1.jpg" title="frame 1" alt="frame 1" /><b>FRAME 1</b></a>
<a id="f2" href="#nogo"><img src="../images/f2.jpg" title="frame 2" alt="frame 2" /><b>FRAME 2</b></a>
<a id="f3" href="#nogo"><img src="../images/f3.jpg" title="frame 3" alt="frame 3" /><b>FRAME 3</b></a>
<a id="f4" href="#nogo"><img src="../images/f4.jpg" title="frame 4" alt="frame 4" /><b>FRAME 4</b></a>
<a id="f5" href="#nogo"><img src="../images/f5.jpg" title="frame 5" alt="frame 5" /><b>FRAME 5</b></a>
<a id="f6" href="#nogo"><img src="../images/f6.jpg" title="frame 6" alt="frame 6" /><b>FRAME 6</b></a>
<a id="f7" href="#nogo"><img src="../images/f7.jpg" title="frame 7" alt="frame 7" /><b>FRAME 7</b></a>
<a id="f8" href="#nogo"><img src="../images/f8.jpg" title="frame 8" alt="frame 8" /><b>FRAME 8</b></a>
<a id="f9" href="#nogo"><img src="../images/f9.jpg" title="frame 9" alt="frame 9" /><b>FRAME 9</b></a>
<a id="f10" href="#nogo"><img src="../images/f10.jpg" title="frame 10" alt="frame 10" /><b>FRAME 10</b></a>
<a id="f11" href="#nogo"><img src="../images/f11.jpg" title="frame 11" alt="frame 11" /><b>FRAME 11</b></a>
</div>

The links enclose each frame image and the associated frame text. These images are not necessary for Flick Animation to work but will be seen as a series of images to visitors without CSS enabled.

Initial images

Created: March 27, 2003
Revised: April 21, 2005

URL: https://webreference.com/programming/css_animation/1

How to Create Flick Animations with CSS