Transitioning into the future

CSS is really growing up. Essentially, we now have the ability to perform moderately complex animations using nothing but good old cascading style sheets. Prior to what CSS3 calls transitions, even the simplest animations would require a 3rd party plugin, or on a smaller scale, a .png image. We’ve always had CSS pseudo-classes like :hover and :active, but with transitions added to the mix, we can make these states perform far more than allowed in the past. Today, we’ll start simple and build a rather cool looking button with a color transition, as well as a background transition. We’ll be focusing on webkit based browsers in this tutorial, because this is where the transitions are most supported. In pt.2, we’re going to be creating a full blown animation in CSS. Excited yet? Let’s get started.

The Color Transition

We’ll start by using basic CSS to get a hover effect on a link. Our link will start off black, and when hovered over, will turn a dark red. Here’s the code to get our link up and running. First, the html file:

Now that you’ve got that, have a look at the CSS.

As you can see, I’ve also made the link element display as a block so that I could add a border, some height and width, as well as some padding. This will help us to give our link the appearance of a button in our next tutorial. Now, we simply have our link set up to change colors upon the user hovering over it. Let’s see how adding a CSS transition effect to our link can make this look far cooler than the standard hover. Here’s what the link code looks like now:

So as you can see, we’ve added the transition property for each browser. These are shorthand declarations, and can be broken down for more fine-grained control. Each transition property takes 3 values.

  1. The property to be transitioned which in our case is color.
  2. The duration of the transition which in our case is 1 second.
  3. The type of transition which in our case is ease-in. This transition starts slowly, and speeds up toward the end of the duration.
  4. Now, if you load up the html file into your browser and hover over the box, you’ll see our link and the box transition from the standard black color into a glowing red. We’ve created a simple, yet elegant effect that can be built upon to make buttons and links far more dynamic.

The Background-Color Transition

Let’s make our link look even more sweet. We’re going to add a background-color transition so that when a user hovers over our link, the background color will fade into view slowly. This can be used to make buttons look amazing, and several sites are already implementing this transition. Here’s what the style sheet should look like now:

Now when you hover over the link button, you’ll see the background color gradually fade into view. Once you stop hovering over the link, the background-color will fade out.

This is a very powerful feature of CSS3 that when used properly, can turn a not-so flashy button into one that stands out. These transitions are very similar to things that are currently being done in Javascript and Jquery, so if you’re not too familiar with those, this may be a viable solution for you. In pt.2, we’ll visit how to use rotation in our transition, and get into some basic animation. See you then!

Download Source Files