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-iteration-count: 1;
@-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.





%d bloggers like this: