Get the Ball Rolling with CSS3 Transitions

August 25, 2011 Tweet

CSS3 is rapidly expanding in terms of popularity and usage as browser support increases and front-end developers open up to graceful degredation.

The properties receiving the most wide-spread usage at the moment seem to be border-radius, box-shadow and other such properties that achieve nice, aesthetic qualities without the use of images.

Rather surprisingly, CSS3 transitions aren’t quite as popular yet. I say surprisingly because they are extremely easy to use; there’s no overly complicated syntax like CSS3 gradients for example and they allow creativity to really flourish.

We’re going to start simple in this post, getting more and more creative with transitions as we go along, eventually ending up with this demo:

This should work in all of the most recent major browser releases, with the exception of IE9 which doesn’t support CSS3 transitions. Opera performs the transitions just fine, but it doesn’t render the radial gradient on the pool ball.

So what are CSS3 Transitions?

Quite simply, they blend an elements property (or properties) from one state to another.

For example, you may have a div with a black background, which on :hover changes to a white background. Using the transition property will apply the :hover state change over a set period of time (0.5 seconds for example), allowing the transition from black background to white background to take place gradually rather than sharply.

In this post, we will be looking at how we can use CSS3 transitions with both the :hover and :active pseudo-classes.

Using CSS3 Transitions with :hover

Okay, first things first, we need to style an element and give it a :hover state.

a img {
    border:6px solid #ccc;
}

a img:hover {
    border:6px solid #a8a8a8;
    opacity:0.8;
}

This is pretty self-explanatory. The image has a grey, 6 pixel border and when hovered, the border darkens and the image itself is 20% more transparent. Simple. But wouldn’t it look so much nicer if those property changes were gradual and smooth rather than sharp and instant?

The Syntax

There are 3 parts to the transition property.

• transition-property – This is the element property that will transition when hovered, for example background
• transition-duration – This is the length of time the transition will take place over, measured in seconds or milliseconds, for example; 0.3s
• transition-timing-function – This is the most confusing property; it denotes the type of transition, for example the default value, ease starts slowly, speeds up and finishes slowly (it eases into the transition then eases out)

Let’s see how this applies to our example (NB – the properties do currently require the appropriate vendor prefixes).

a img {
    border:6px solid #ccc;
    -moz-transition-property:border, opacity;
    -moz-transition-duration:0.4s;
    -moz-transition-timing-function:ease;
}

a img:hover {
    border:6px solid #a8a8a8;
    opacity:0.8;
}

And that’s it! On :hover, the transition from the image’s normal state to the :hover state will now take place over 0.4 seconds like so…

Sexy, eh? And simple too! But it gets even simpler! If you know anything about CSS, you probably could have guessed by now that there’s a much shorter and easier way to utilise CSS3 transitions.

a img {
    border:6px solid #ccc;
    -moz-transition:all, 0.4s, ease;
}

a img:hover {
    border:6px solid #a8a8a8;
    opacity:0.8;
}

So that’s -moz-transition:property, duration, timing-function;. You will have noticed that we’ve used all for the property to be transitioned – this means exactly what you think it means. All properties that are styled differently on :hover will experience the transition that you have declared.

Getting more creative with :hover transitions

That example was really nice and simple, but I wanted to show that CSS3 transitions aren’t all about making your rollovers slightly more satisfactory; they allow for copious amounts of creativity.

I put together a simple demo to show what can be done when you throw other CSS3 properties into the mix, most importantly in this case, the transform property.

Before anybody points this out, I realise that the effect isn’t technically physically accurate due to the light source following the ball around as it spins! But that’s not important in this tutorial.

Again, it’s a pretty cool effect and extremely simple to achieve.

div.ball {
    width:234px;
    height:234px;
    border-radius:117px;
    background-image: -moz-radial-gradient(90px 90px, circle, #dbeaf5 0%, #a5cdea 10%, #6fb3e6 20%, #238fe2 30%, #2081cb 50%, #0e5d99 70%);
    -moz-transition:all 2s ease;
}

This code creates the pool ball’s aesthetics from its shape to its gradient background. We won’t go into this stuff as we’re focusing on transitions – if you want to know more about CSS3 gradients and shapes, take a look at my ‘famous logos recreated with CSS3‘ series!

In the above code you can also see the transition property which declares that any state changes will occur over 2 seconds.

div.ball:hover {
    -moz-transform:rotate(660deg);
}

On the :hover state, we have one simple property which performs the magic of this demo. The transform property is another member of the CSS3 family, which allows us to manipulate elements. In this case, we’ve simply rotated the element 660 degrees when it is hovered and because this rotation is transitioned over 2 seconds, it creates a spinning effect.

Using CSS3 Transitions with :active

There’s more to CSS3 transitions than simple :hover states – we can take our example to the next level using the :active pseudo-class! Here’s the new demo:

This is another cool effect and all it takes is a couple more lines of CSS, no fancy jQuery or Flash, just good old CSS.

div.ball {
    width:234px;
    height:234px;
    border-radius:117px;
    background-image: -moz-radial-gradient(90px 90px, circle, #dbeaf5 0%, #a5cdea 10%, #6fb3e6 20%, #238fe2 30%, #2081cb 50%, #0e5d99 70%);
    -moz-transition:all 2s ease;
    position:absolute;
    top:30px;
    left:30px;
}

div.ball:active {
    -moz-transform:rotate(660deg);
    left:700px;
}

All we’ve done to the code is ensured the element is absolutely positioned so we can change the left property value on :active, where we’ve simply changed the value from 30px to 700px so the ball shifts right across to the other side of the screen. Coupled with the rotation through the transform property, this creates the effect that the ball is actually rolling from one side of the screen to the other.

When can you start using CSS3 transitions on your sites?

Now! For subtle :hover effects, you are free to start using transitions right now, as browsers that don’t support the property will simply perform a standard :hover effect without the transition!

Obviously, for the pool ball demo and other similar cases where we start to throw in other CSS3 properties like gradients and transforms, support is a bit more limited and they do not degrade so gracefully. Don’t let this stop you experimenting though!

Browser Support

CSS3 transitions are supported across the board in all the recent major browser releases… apart from Internet Explorer 9 of course. But that’s no great surprise is it?

Did you like this article? Give it a re-tweet and/or leave a comment below!

About Stephen Greig

Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.