WebKit has introduced another great feature – CSS animation. It is simply amazing what you can do with CSS transitions combined with CSS transforms.

Transitions can be specified using following properties:


For example

img#testimg1 {
    opacity: 1;
    -webkit-transition: opacity 1s linear;
img#testimg1:hover {
    opacity: 0;

would fade out the image if rolled over:

flash tekkie

Combining transitions with transforms in (X)HTML like this

<img style="-webkit-transition: -webkit-transform 5s ease-in;" onclick="this.style.webkitTransform='rotate(360deg)'" src="image.png" alt="" />

would flip the image 360 degrees in 5 seconds time on first click:

flash tekkie

Please note that you would need WebKit for the above samples to function properly.