Henrik speaking at a conference

Hi, I’m Henrik Joreteg

Mobile web consultant, developer, and speaker

all posts | twitter | email | hire | book | tutorials

Playing around with CSS animations in WebKit


NOTE: This will only work on webkit based browsers like Safari or Chrome.

If you mouse over the blue “RSS” button below (which conveniently happens to be a link to my blog feed). You should see something cool.

You should see the button spin and zoom when you mouse over. A bit corny, yes, but the cool thing is that it’s done with absolutely zero JavaScript. It’s all CSS!

It may seem pointless just because only webkit browsers support it. But it’s actually something you can use as a progressive enhancement since other browsers will just ignore it.

The magic all happens in the following two lines:

a#rss_demo_button{
    position:absolute;
    -webkit-transition: all 2s ease-out;
}
a#rss_demo_button:hover, a#rss_demo_button:focus {
    -webkit-transform: scale(1.50) rotate(-360deg);
}

The -webkit-trasition sets how transformations will take place, and the second statement adds the transformation effect on focus and hover. I’m still digging deeper into all of this, so right now that’s all I’ve got. But play around with it, there’s a lot more that can be done with this stuff. If you’ve done something cool with it. Throw a link in the comments.