CSS3 Transitions

CSS3 has settled in quite nicely into the development playground for me at least but for businesses, this property alone provides some serious value. If you’ve been programming since the early 90s, you’ll see that we’ve gone a long way with interactive elements – javascript not included. In this post I’m talking about CSS3 Transitions, as mentioned on another post CSS alone is a major powerhouse.

So let’s go back in time a bit when we had to use images to indicate user feedback – a scenario would be a visitor hovers a link and then it changes color or is underlined after you hover it. This is a good thing – it lets the visitor know the element does something, presumably a link that goes somewhere. But designers and developers stepped it up a notch by adding image rollovers, we kinda needed the help of Javascript.

And then CSS pseudo class “:hover” came into the mix. This feature of CSS was a huge addition to user interfaces, with hover you can change colors, increase the size of an element even change the background all through plain css and without any images. It was a win-win situation every time, using pure CSS would eliminate an HTTP request to an image, good for page speed.

Below is an example of changing a hyperlink from red to blue using :hover. The transition is immediate though.

a {
  color: red;
}

a:hover {
  color: blue;
}

Recently I was just about to just use :hover for a link, something I’ve really gotten used too. But with CSS3 the transition property was introduced and I would be cutting myself and the client short of value. With CSS3 transitions we can create a fade in effect and a smooth one, something you usually see Javascript do. But why add more Javascript when you can do it all with CSS3?

All you need to do is use the property “transition” and give it a value in seconds. So why not just add some cool animation to it?

a {
    color: red;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

a:hover {
    color: blue;
}

At first I thought the transition property would be added to the hover psuedo class, but actually it’s added to just the hyper link. That actually makes things a lot easier. If you’re thinking hey this isn’t always necessary, it’s a bit over kill – yeah I totally agree. But it doesn’t hurt to understand what value go with what property and if you’ve been working with CSS stylesheets there are a ton to remember.

Just know that:

• -o- prefix in -o-transition mean target opera browsers
• -ms- prefix in -ms-transition mean target IE browsers (I think?)
• -mox- prefix in -o-transition mean target Firefox browsers
• -webkit- prefix in -o-transition mean target safari, IOS, Android browsers
• The one without a prefix catches all the remaining modern browsers

For example if you’re using chrome you can fire up the console and you’ll see this:

Means it’s working and you’re good to go.