animation image
animation image

Cat

NOTICE TO MAC MOUNTAIN LION + SAFARI 6 USERS: Please accept my apologies for the horrible flashing on my animation experiments. Safari 6 (on Mac OSX 10.8+) has a widespread CSS3 animation rendering bug that is causing the problem. Until Apple resolves the issue, I encourage you to try these pages in Chrome or Firefox for the ideal experience.

You may have noticed that I like schematics, medical illustrations, and similar presentations. I like this one in particular and it seemed like a fun one to play with. The goal was simply to make the lion's tail wag. 

How?

The lion and its tail are two separate images. The tail is animated by using CSS3 rotate and skew transforms. I experimented with other significant transformations, such as a really fast 90-180 degree flip of the tail, but I was not able to achieve the desired result. jQuery to CSS3 transition support is provied by the excellent jQuery Transit plugin.

Browser Support

All modern browsers except Internet Explorer 9. 

Other Dreams

View the rest of the visual experiments.

blog comments powered by Disqus

Get in Touch

Question, comment or request? Send me a note.