CSS3 scale and rotate animation (webkit only)

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.

CSS3 scale and rotate animation (webkit only)

Like this: