Posted by Pad on June 30th, 2011

In my last article, I explored how you can use the CSS3 transform property to add visual interest to your site’s navigation menu. The thing about the transform property is that the visual change of an element from its base state to the transformed state is somewhat… abrupt. Sometimes you might prefer a more gradual transition.

Amazingly enough, CSS3 provides tools to make that possible. For simple transitions such as size and color, the transition property lets you control the amount of time an element takes to change from one state to another, how long to wait before changing state, and whether the transition should be linear or whether it should follow a curve (more on that later).

Starting off with the same navigation list:

<div id="menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Home</a></li>
 <li><a href="#">On</a></li>
 <li><a href="#">The</a></li>
 <li><a href="#">Range</a></li>
 </ul>
</div>

and the same basic styling, including a :hover pseudo-class to provide some visual differentiation for navigation:

#menu li {
 width: 80px;
 color: #EE0;
 list-style: none;
 background-color: #039;
 padding: 5px 10px;
 border-color: #DEF;
}
#menu li:hover {
 background-color: #F80;
 border-color: #FF0;
}

The result looks similar to how it looked in the last article:

If we add a transition property to the :hover style, the transition from the base state to the hover state is gradual:

#menu li:hover  {
 background-color: #F80;
 border-color: #FF0;
 -ms-transition: background-color 250ms, border-color 500ms;
 -moz-transition: background-color 250ms, border-color 500ms;
 -webkit-transition: background-color 250ms, border-color 500ms;
 -o-transition: background-color 250ms, border-color 500ms;
}

Note that transition can apply to more than one property and that the durations can be set independently for each affected property.

The transition property is limited to relatively simple effects, such as color, border, margin, padding, and size changes. For more complex transitions, such as transform, the animation property lets you control the same state-change parameters as the transition property, plus it lets you define multiple keyframes, animate forward and backward, loop the animation indefinitely (which is not usually not a good idea) or specify the number of times that an animation will play.

Animations work by defining keyframes that define the appearance at specific points in the animation. The simplest animation would thus have only two keyframes—one at the start and one at the end.

Note: at the time of this writing, neither Internet Explorer 9 nor Opera 11.5 provide support for keyframe animations.

Here’s an example of a simple animation:

#test li:hover {
 -webkit-animation: selected alternate infinite 1s;
 -moz-animation: selected alternate infinite  1s;
}
@-webkit-keyframes selected {
 from {
 border-color: #DEF;
 background-color: #039;
 }
 to {
 border-color: #FF0;
 background-color: #F80;
 -webkit-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
 }
}
 @-moz-keyframes selected {
 from {
 border-color: #DEF;
 background-color:  #039;
 }
 to {
 border-color: #FF0;
 background-color: #F80;
 -moz-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
 }
}

For more complex animations, we can create intermediate keyframes as in the following example:

@-webkit-keyframes selected {
 from {
 border-color: #DEF;
 background-color: #039;
 }
 33% {
 border-color: #FF0;
 background-color: #F80;
 -webkit-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
 }
 67% {
 border-color: #FF0;
 background-color: #F80;
 -webkit-transform: translate(30px) scale(.75) rotate(15deg) skew(10deg);
 }
 to {
 border-color:  #FF0;
 background-color: #F80;
 -webkit-transform: translate(0) scale(1) rotate(0) skew(0);
 }
}
@-moz-keyframes selected {
 from {
 border-color: #DEF;
 background-color: #039;
 }
 33% {
 border-color: #FF0;
 background-color: #F80;
 -moz-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
 }
 67% {
 border-color: #FF0;
 background-color: #F80;
 -moz-transform: translate(30px) scale(.75) rotate(15deg) skew(10deg);
 }
 to {
 border-color:  #FF0;
 background-color: #F80;
 -moz-transform: translate(30px) scale(1.5) rotate(-15deg)  skew(-5deg);
 }
}

When animated, it looks something like this:

As you have no doubt discerned from the examples, the animation property offers much more control over the intermediate states of an animation, as well as allowing you to animate more CSS3  properties, such as transform. The downside is that it hasn’t been implemented in many browsers yet.

In the next article I’ll look at some of the new CSS3 selectors.

Tags: animation, css, web

This entry was posted on Thursday, June 30th, 2011 at 2:15 am and is filed under Expression Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.