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 HTML like this

  <img style="-webkit-transition: -webkit-transform 5s ease-in;" onclick="this.style.webkitTransform='rotate(360deg)'" src="/assets/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.