animation imageanimation image

Dream Cat

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.