Getting Started with CSS3 Animations

CSS3 Animations

One of the more exciting features of CSS3 animation. A task that was once doomed to wrangling of JavaScript, animation can not be executed with ease using well-known CSS style syntax. Like any capable system, CSS3 animations have the potential to be both complicated and confusing. That being said, they don't have to be. I found the best way to understand CSS3 animations is just getting started with some basic transitions. But first, one must understand how CSS3 animations work.

CSS3 Animations

How CSS3 Animations Work

In a nutshell, these animations work by defining "frames" and then deciding how the changes should transition from frame to frame. Let me explain with an example. You have an element that begins at 200 pixels wide, you want it to expand to 400 pixels. The beginning 200 pixel state is the first frame, the ending 400 pixel the last. From here you can decide how you want the element to expand and how long it should take to happen. Simple enough, right?

A Basic Example

With the idea that "less is more" in mind, the easiest way to get started is by using pseudo selectors. If you don't recognize the term, it's a fancy way of describing a :hover or :focus selector. By using pseudo selectors we can easily code a starting frame (unhovered) and a finishing frame (hovered.) In this example we are going to make an anchor tag grow and change color when hovered upon.

HTML Code

<p class="css3anim" ><a href="#">Hover Over Me</a></p>

CSS Code

.css3anim a { 
               display: block; 
               width: 150px; 
               height: 75px; 
               font-size: 18px;
               background: #ddd; 
               color: #fff;
               text-decoration: none;
               padding: 10px;
   }
  .css3anim a:hover { 
               width: 175px;
               height: 100px;
               background: #000;
               color: #fff;
               font-size: 20px;
 }

At this point if you hovered over our example it will grow in size but it would happen instantly, not the effect we are looking to achieve. In comes the CSS3 "transition" property. The transition property allows you to control how an element transitions from frame to frame. In this case the unhovered state to the hovered state.

The transition property has four options:

• What to transition
• How long it should take
• And style of transition
• How long to delay the start of the animation

While there are lot of aspects you can transition, for simplicities sake lets transition all changes in the element, for 1 second using ease-in-out (a pretty standard transition style.)

So our CSS would be updated to the following:

.css3anim a { 
            display: block; 
            width: 150px; 
            height: 75px; 
            font-size: 18px;
            background: #ddd; 
            color: #fff;
            text-decoration: none;
            padding: 10px;
            transition: all 1s ease-in-out;
}

If CSS3 was fully supported that's all one would have to do. Since it's still in beta we need to use vendor prefixes to ensure our browsers will recognize the command.

.css3anim a { 
            display: block; 
            width: 150px; 
            height: 75px; 
            font-size: 18px;
            background: #ddd; 
            color: #fff;
            text-decoration: none;
            padding: 10px;
            -o-transition: all 1s ease-in-out;
            -ms-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
}

And there you have it! That's all you need to do. See the demo below for a live example (if you are using a modern browser of course.)

Hover Over Me

Additional Resources

With a grasp of the transition property, you can begin to explore other transition options and capabilities. For more information take a look at the official spec here or a more down to earth tutorial at w3schools.