Using CSS Transitions

A CSS transition will take a CSS property value and change it to a different property value over a period of time. This allows you to create animation-like effects such as fading visibility, making elements that move and more.

CSS transitions are fairly new so they aren't supported by all browsers just yet but that doesn't mean that you can't start using them in your pages. This post goes over some ways you can use CSS transitions in your pages and still provide a fallback for older browsers.

Using The transition Property

Let's start by looking at some of the available transition properties.

• transition-property : The names of the properties that should change during a transition.
• transition-duration : The amount of time a transition should take to complete.
• transition-timing-function : The way that a transition is performed. For example, linear is a steady transition from one rule to the next whereas ease-out starts out moving quickly and slows down through the duration.
• transition-delay : How long to wait before the transition begins.
• transition : The shorthand version that allows all values to be used at once.

Additionally, there are quite a few vendor specific property names you'll want to include to be sure your animation works in as many places as possible. Below is an example using the transition-property to set the color value for multiple browsers.

-moz-transition-property : color; /* FireFox */
-webkit-transition-property : color; /* Safari / Chrome */
-o-transition-property : color; /* Opera */
transition-property : color; /* W3C */

In order to save space the CSS samples in this post will not show each vendor specific property. You will need to add the complete list of styles if you use this in your site.

Fade / Toggle Visibility Example

Let's look at an example of how the :hover pseudo selector can be used to trigger a fade-in/out transition that also works with Internet Explorer (no fading, just visibility). Move your mouse over the example below to see the effect in action.

Fancy Camera

High resolution camera with built-in flash, auto-focus and includes a high quality leather case.

37 units in stock! Order now! Add to favorites

Browsers that support the :hover selector on any element should see the box appear when mousing over the product. If the browser also supports CSS transitions the box will fade into view.

The markup and CSS used to create the fade-in transition effect is below. You'll notice the fade-in class is used to identify an element that can trigger the transition for all fade-in-target child elements.

HTML

<div class="product fade-in" >
  <div class="description" >
    <div class="photo" >
      <img src="camera.jpg" alt="Camera!" />
    </div>
    <h4>Fancy Camera</h4>
    <p>
      High resolution camera with built-in flash, auto-focus and 
      includes a high quality leather case.
    </p>
  </div>
  <div class="options fade-in-target" >
    <strong>37 units in stock!</strong>
    <a href="/order" class="option-order" >Order now!</a>
    <a href="/fav" class="option-fav" >Add to favorites</a>
  </div>
  <div class="clear" ></div>
</div>

CSS

.fade-in .fade-in-target {
  opacity : 0;
  transition-property : opacity; 
  transition-duration : 0.7s; 
}

.fade-in:hover .fade-in-target {
  opacity : 1;
  transition-property : opacity; 
  transition-duration : 0.3s; 
}

#ie .fade-in .fade-in-target { 
  visibility : hidden; 
}

#ie .fade-in:hover .fade-in-target,
#ie6 .fade-in .fade-in-target { 
  visibility : visible; 
}

What Is Happening?

Changing properties for hovered elements is very common with CSS. Most websites do something with their links similar to the example below.

a { color : #00f; /* blue */ }
a:hover { color : #f00; /* red */ }

Changing the color of a link when hovered over is only a few, simple lines of CSS. Adding a transition is only a few lines more.

a { 
  color : #00f; /* blue */ 
  transition-property : color; 
  transition-duration : 1s; 
}

a:hover { 
  color : #f00; /* red */
  transition-property : color; 
  transition-duration : 0.5s; 
}

This set of rules works exactly the same but with one exception - the transition identifies how the change takes place.

Transition rules apply when changing the state of an element. So for example, the :hover state uses color, 0.5s * transition whereas the normal state uses *color, 1s transition. If rules aren't provided for the original state then the transition is immediate.

Making It Work With Internet Explorer

It's worth pointing out that this approach requires a few extra rules to handle the different versions of Internet Explorer.

First, the visibility property is used instead of opacity or resorting to the Internet Explorer specific filter: property. The primary reason for toggling visibility in only Internet Explorer is that the visibility property will not wait for the transition-duration value to finish before applying. This will cause the elements to fade in correctly in other browsers but disappear immediately when the mouse is moved away from the element (no fade out effect).

Second, since Internet Explorer 6 doesn't support the :hover selector on any element other than links we're forced to simply leave the elements always visible.

Using Multiple Transition Properties

Toggling visibility is a small example of the things you can animate with CSS transitions. Below is an example that combines fading, moving and transition delays to create an interesting effect.