• Jul 25, 2011

• Have Some Fun With CSS3 Transitions

• by Toby Pitman in Web

• Genre: Web
• Level: Intermediate
• Time to Complete: 15-30 minutes
• 0 comments — Start Discussion

It seems that browser vendors are really pushing new CSS3 features through at a pretty fast pace despite CSS2.1 only just having been finalized.

Even though CSS3 is years away from being finished most modern browsers have been implementing it for a while. In this quick tip I’ll show you a neat little roll-over effect using CSS3 Transitions. 

Step 1

I have some very simple markup here. Just an unordered list with some links in.:

I’ve put the link tags inside some span tags purely for backwards compatibility. I know it’s not strictly semantic but if you want this to work in IE6 (Shakes fist!!!) this is how you’ll need to mark it up as IE6 (Shakes fist!!!) will not understand :hover on anything other than link tags. For IE7 you’ll need to make sure to declare a doctype for :hover to work on non-link elements. Pathetic, I know!

I’ve applied some simple styling to make a horizontal navigation bar. 

This is the result:

I’ve applied display: inline; to the list tags to prevent some layout issues in IE6 (Shakes fist!!!).

Step 2

Now I’m going to apply a background image to my link tags:

This is the result:

I know this looks a bit weird but bear with me. The image is positioned using the background shorthand rule.

background: ;

Step 3 

Now I can style the span tags.

This is the result.

You’ll notice that the link tags' background image is now hidden by the background color of the span tag which is sitting on top of it. The span tag is also 20px smaller in height than the link tag. This is important!

Step 4

Now I’ll apply the :hover rule to my link tag. This will cause the link tags background image to move 10px downwards, essentially revealing it when you mouse over the link.

This is the result.

At this point you're essentially in fallback mode. The current markup should work in every known browser. Any code I add from now on will be CSS3 and support will vary from browser to browser.

Step 5

Now I’ll add my CSS3 Transition rule to the link tags.

Here’s how it works. 

transition: 

all (apply to all CSS properties of this element)

.3s (the time for the transition)

linear (the timing curve of the transition)

Now any change in the properties of the link tags (on ‘hover’) will transition smoothly to its new value. Namely the background position and the text color.

You’ll notice also that there are quite a few vendor prefixes for CSS Transitions. Each browser currently implements this effect in different ways so we need to target as many as we can. 

-moz- = Mozilla Firefox

-webkit- =Safari, Chrome

-o- = Opera

Once this is finalized it will become simply ‘transition’.

Step 6

Finally I’ll add some quick rounded corners.

This is the result:

Compatibility

• This should work well in Firefox, Safari and Chrome. 
  
• Opera does support CSS3 Transitions but not yet on background-position. 
  
• Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!
  

Conclusion

This concept can be applied to loads of roll-over effects. In the download below you’ll find some more examples including this effect where when you roll over an album it shows you the format CD, Vinyl with a nice transition.

DOWNLOAD SPECIAL CSS3 EXAMPLES HERE.

Play about and have some fun & check out this CSS Floating Layouts Title.