Programming Stuff

Neko The Cat: HTML5 + CSS3 Animation

I created this post thinking back in my first programming class about animation using Java. At that time, I was using JAVA Applet technology. The project was to reproduce Neko program that was a nice cat in its basic activities: running, yawn, scratching, sleeping and more run. I think that program was originally from Japan and it’s really fun.

CSS3 introduced keyframes, a new feature for transitions, transforms and animation. The use is very easy just split the time frame in percents (0% to 100%) and define for each percent a particular style. And finally you will need to set the duration and loop time. Then, what happens is the browser rendering provider will try to create intermediate frames to produce a nice animation on the fly. For instance, if your animation start with color yellow and the final color is red, then the rendering provider will create the other colors in between, such as orange. Or if your initial position is 0 and the final position is 100 then the rendering provider will positioning the object from 0 to 100 and you will see the object moving.

My first attempt creating Neko was not success because I tried to change the background image from one frame to another, and the reason why this doesn’t seem working is because the rendering provider doesn’t know how to create this intermediate images. For instance if you initial image is a curve and the final image is a line you may expect the rendering provider provide intermediate frames showing how the draw is stretching while time pass by. But here is the thing, I don’t think the rendering provider is advanced enough to do it, instead is just shutdown the use of background image.

When I see a coke-cane example, immediately I though to animate Neko by using similar approach. As the label in the coke where just show part of the image and while the rest is hide; I join all Neko images in one large image and just display one at the time and hide the rest. In my animation, I normally repeat the frame twice. The first one is used to show the initial state and the second to keep it before it changed (in this case, I avoid the transitions and transforms). The duplicate frame normally ending with .99%. The CSS3 keyframes is not current supported by IE9, and we need special keyframes for IE10 (@-ms-keyframes / -ms-animation), Firefox/Mozilla (@-moz-keyframes / -moz-animation), Chrome, and Safari (@-webkit-keyframes / -webkit-animation).


Note: This example does not work in Internet Explorer and Opera.

Source:
CSS3 Animations http://blogs.msdn.com/b/davrous/archive/2011/12/06/introduction-to-css3-animations.aspx
http://www.w3.org/TR/css3-animations/
Try it yourself http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes4
Neko http://www.csse.uwa.edu.au/~peterj/javalin/tut4-l9.html
http://www.sorcon.com/java/JAVA12.html
http://www.seas.gwu.edu/~rhyspj/fall06cs143/lab11/lab111.html
Coke Cane http://www.romancortes.com/blog/pure-css-coke-can/