A Comprehensive Guide to CSS 3 Transitions

As demand for Adobe Flash exponentially grows, so does the need for alternative forms of web based animation. Part of the reason for this push is Flash’s proprietary nature (owned and controlled by a specific company). Alternatives such as Microsoft’s Silverlight have wandered into the market, but present the same problem. The web is an open format that needs to be freely available to the general public due to its revolutionary nature. Failure to make this concept a reality could ultimately hinder the Internet's development.

This is better explained in Bruce Lawson’s Introducing HTML 5, where the author presents this dilemma. What if the original printing press was patented? If so, could you imagine how the world would have developed differently? For this article, we will take a look at using next generation animation technology called CSS transitions in your projects.

A Comprehensive Guide to CSS 3 Transitions


Current State of CSS Transitions

Currently CSS Transitions have been developing slowly with the W3C (World Wide Web Consortium) moderating discussion with other browsers, but support has rapidly grown in the past year. Safari and Chrome are leading, while the most recent build of IE and FireFox are lacking. Internet Explorer 9 (currently in beta) is probably not going to have CSS 3 transitions. IE's lack of support is about as surprising as opening up a refrigerator to find food. On the other hand, it’s quite odd that FireFox hasn't added CSS transitions yet.

Current State of CSS Transitions

Originally FireFox 3.7 was slated to launch with CSS transition support. For some particular reason, FireFox canceled the launch and announced 3.7 would enter production as version 4. Since then, they've been trucking away at a new UI, JavaScript engine, and lots of CSS 3 support. Problem is, their lack of a new release has caused FireFox a decline in appraisal from the web design community. The good news is you can download FireFox 4 beta to play with the CSS transition snippets we’ve provided in this article. What’s even better is FireFox 4 has been slated to launch fairly soon, so all the examples below will work once the new version is released.

What about CSS 3 Animations?

For this simple guide we decided not to use CSS 3 animations. Most browsers have not implemented support yet and it seems essential to understand transitions first. So, since animation support is extremely minimal right now, we're going to hold off on this. The CSS animation property is really just a more complicated version of transitions anyway.

CSS3 ATAT

As animation develops more support you’ll be able to create slideshows, repeating transitions, animated sequences, and several other complex forms of programming with a few simple lines. Currently standardization and usage of this is experimental at best. It should be noted that some browsers such as FireFox can perform animations via a little JavaScript. If your response to hearing that is “So why aren’t we using them?” think again. The point of using CSS transitions is partially to avoid using JavaScript and focus on just CSS.

The Anatomy of CSS Transitions

Creating your own custom transitions may seem intimidating, but it’s actually quite simple. They take four parameters via individual properties or short hand form. The only frustrating news you’ll get is you have to use every browsers’ extension to activate the transition. That means writing a line of code for Safari/Chrome, Opera, FireFox, and future support (sounds like the beginning of carpel tunnel).

The Anatomy of CSS Transitions
Image credit: Tony Case

Selected Property

The first property coordinates with the desired property you wish to animate. So, if you wanted to animate the color and font-size of your text paragraphs write something like this to target them. You may want to double check that browsers support the properties you want to animate by checking their documentation (links at the bottom of this article). Support for specific CSS properties like box shadow is dodgy and some specific properties are loaded with bugs when animated. The last thing you want to do is animate your page to death by making it crash.

p {
  -webkit-transition-property: color, font-size;
  -o-transition-property: color, font-size;
  -moz-transition-property: color, font-size;
  transition-property: color, font-size;
}

Let’s say that you wanted to target “all” of the CSS properties instead of just a single one. You could write a line for each property, or you could simply use the all statement. Once again though, be careful with animating everything as you may fire a bugged property.

p {
  -webkit-transition-property: all;
  -o-transition-property: all;
  -moz-transition-property: all;
  transition-property: all;
}

Duration Length

Setting the time for an animation is quite simple. All you need to do is give it seconds formatted as Xs. X = seconds, also accepts decimals such as .3s. Try to avoid larger numbers for your animation timing. Otherwise people won’t see it when they hover over an image. Make sure you set something here, as the initial value is 0, making your animation non-existent until you change it.

p {
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  -moz-transition-duration: .5s;
  transition-duration: .5s;
}

Transition Timing

The transition timing property defines how the animation will occur. This gets pretty technical due to the cubic bezier curve, so we’ll just stick with the major properties you can use (ease-in-out, ease, linear). See the W3C guide for a complete list of the properties and more advanced details for this one.

p {
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

Timing Delay

You can set a delay in your transition animation through the timing delay property. Haven’t really found much use for this yet, but I’m sure somebody will. Defaults to zero, so don’t worry about setting this right now.

p {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  -moz-transition-delay: 1s;
  transition-delay: 1s;
}

Use Shorthand Codes

We could create several huge chunks of code every time we need CSS animation. Why do that when we can write a shorthand version? Transition shorthand statements use the formula of transition: <property> <duration> <animation type> <delay>;

Use Shorthand Codes

p {
  -webkit-transition: all .5s ease-in-out 1s;
  -o-transition: all .5s ease-in-out 1s;
  -moz-transition: all .5s ease-in-out 1s;
  transition: all .5s ease-in-out 1s;
}

Putting Everything Together

Below are some CSS transition snippets built upon the concepts we’ve talked about. These should only need some minor tweaking to be integrated with projects. Graceful degradation was practiced with all of these examples (except the animated block), so they'll work fine in non-supporting browsers. Also, you'll notice a snippet of code to help future proof your designs when transitions become standardized (the transition property).

Putting Everything Together
Image credit: Incase

Fading Links

Since JavaScript based fading hit the market, it’s been HOT for developers/designers who program with standards. Thankfully CSS transitions give us the ability to use this technique without an exuberant amount of coding. The snippet below will "Oooohhh" and "Aaahhh" your users, but if their browser doesn't support it, they won’t notice anything out of place. Make note here that we target the selector directly without a pseudo class for declaring our transition.

Fading Links

Markup

<p>Look at this really cool <a href="#">test link</a>.</p>

CSS

a {
  color: #000;
  /* Animate color property across all supporting browsers */
  -webkit-transition: color 1s ease-in-out;
  -o-transition: color 1s ease-in-out;
  -moz-transition: color 1s ease-in-out;
  transition: color 1s ease-in-out;
}
a:hover {
  color: #a00;
}

Fading Buttons

With a little bit of CSS 3 and a simple transition like the one above, a Really Cool Button is born. This is such a leap forward from the old JavaScript method where you created two images, overlapped them, and then eased in/out (made for a long day of programming with little return). Our demo here is very basic, but you could also add gradients, text shadow, and/or many other CSS properties to really put some fancy pants on your buttons. Beware though, as you might notice in this demo, it causes a bug to flare in Opera via the box shadow property. Hopefully Opera will be adding more support to transitions in the near future.

Fading Buttons

Markup

<p><a class="button" href="#">Really Cool Button</a></p>

CSS

.button {
  background: #700;
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
		
  /* Rounded corners */
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
		
  /* Box shadow */
  -webkit-box-shadow: 0px 0px 3px #212121;
  -moz-box-shadow: 0px 0px 3px #212121;
  box-shadow: 0px 0px 3px #212121;
        
  /* Animate all properties across supporting browsers */
  -webkit-transition: all 1s ease-in-out;
  /* -o-transition: all 1s ease-in-out; */
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.button:hover {
  background: #b00;
    
  /* Box shadow animation bugged in Opera */
  -webkit-box-shadow: 0px 0px 10px #000;
  -moz-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px 10px #000;
}

Increasing Box Size

Online forms are packed with abnormally small text inputs frustrating users to death on a daily basis. Because of this, it’s a good idea to expand text boxes via JavaScript to create a larger text area. This method had some serious problems though, if JavaScript was turned off the box would not expand, sometimes the cursor would disappear, and in rare cases it caused abnormal behavior with Safari/Chrome. Now with CSS 3 you can expand and animate a text box with a simple snippet of code. The best part is it degrades simply in IE, so they’ll get everything except for the animation.

Increasing Box Size

Markup

<textarea class="growBox"></textarea>

CSS

.growBox {
  width: 400px;
  height: 200px;
  border: 1px solid #212121;
	
  /* Animate height across supporting browsers */
  -webkit-transition: height 1s ease-in-out;
  -o-transition: height 1s ease-in-out;
  -moz-transition: height 1s ease-in-out;
  transition: height 1s ease-in-out;
}
.growBox:focus {
  height: 400px;
}

Brief Animation

Transitions give you the ability to perform brief animations, but they are limited, and support is well... awkward. Think of it this way, you can create an animation, but it probably won't gracefully degrade in IE, in fact, users probably won't see it at all. This is ok if your animated element is just a box expanding, but more complex animations have some issues. For a more in depth explanation of CSS animations through transitions, view the CSS rocket tutorial.

Brief Animation

Markup

<div id="animationBox">
    <p></p>
</div>

CSS

#animationBox {
  border: 1px solid #212121;
  width: 400px;
  height: 200px;
  position: relative;
}
#animationBox p {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: #b00;
  margin: 0;
  padding: 0;
  bottom: 0;
  display: block;
	
  /* Animate all properties across supporting browsers */
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#animationBox:hover p {
  /* Transform property allows us to animate the image */
  -webkit-transform: translate(300px,-100px);
  -moz-transform: translate(300px,-100px);
  -o-transform: translate(300px,-100px);
  transform: translate(300px,-100px);
}

When will CSS Transitions Become Standard?

CSS transitions will become standard when major browsers finally integrate them. Although the W3C tries to implement various standards, it really doesn't matter if browsers refuse to integrate them. Also, let’s not forget Internet Explorer, which probably won’t have transitions until version 10 or beyond. It should be noted that IE does have a transition API, although it is extraordinarily lacking in comparison to what other browsers are laying the groundwork for.

When will CSS Transitions Become Standard?
Image credit: Xoán Porto

Let us know if you are actively using transitions in your projects or plan to do so in the future. Also, if you know of any good resources, it would be nice to have them in the comments.

Essential Resources

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.