Have you tried hovering over my logo (up top) in webkit? The animation is a nice effect and is really easy to implement as a progressive enhancement.
#logo a:hover {
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes rotateThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(360deg); }
}
The important part is the ‘keyframes’ chunk – this tells the browser what to animate, and at what point. In my example we start off (0%) with a non-scaled, non-rotated element. We then (at 10%) make it larger, and finally we make it finish (100%) fully enlarged and rotated 360 degrees.