Animating Colors: Using CSS3 Transitions with jQuery Fallback

Have you ever wanted to animate the color of an element (e.g. font color) on mouse hover? You might think that it can be easily done with jQuery, but jQuery doesn't support animating color changes at all unless a plugin or jQuery UI is used. What you need is a quick and easy way to add simple color animation to an element, and that's where CSS Transitions come into the picture. Transitions are a part of the draft CSS3 specification and provide a means to animate changes in CSS properties rather than having those changes take effect instantaneously.

It's an easy way, but it has one drawback, it's only supported by modern browsers, however you can’t leave users on old browsers alone, so what you need is some graceful degradation for browsers that don't support CSS transitions. In this posting we will be taking a look at how we can animate colors using CSS3 transitions and jQuery's .animate() method as a fallback where transitions aren't supported by the browser.

Why Not Use jQuery?

You might be wondering why not just stick with jQuery for animating? For years, web designers have relied on JavaScript for in-page animations but this is far from ideal. The reason that we are going use CSS3 transitions is that unlike regular JavaScript transitions, CSS3 transitions are hardware accelerated and therefore smoother, Especially on mobile devices with limited computing power, this can be a lifesaver.

According to W3C, CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

For example, you may define a transition for the position and background-color properties and then set both property values of an element at the same time. The element’s old color and position transition to the new color and position over time as illustrated in this image:

So, let’s create an element with a certain CSS and then use the :hover pseudo-class to change the font color. we’ll use a transition to smooth out that change—an effect previously only possible using JavaScript or Flash, but now possible with a few simple lines of CSS.

The markup is a simple hyperlink, like so:

<a href="" class="test" >Transition me!</a>

Next, we’ll add a declaration for the normal link state followed by the font color swap to blue on hover:

a.test {color:#AAA;}
a.test:hover {color:#F00;}

Now let’s add a transition to that font color change. This will smooth out and animate the difference over a specified period of time.

It’s essential to use the appropriate vendor prefixes therefore our transitions will work in more browsers as support is rolled out. You’ll notice the two parts of a transition in the declaration:

transition-property: Specifies the name or names of the CSS properties to which transitions should be applied.

transition-duration: Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.

There are also two other properties which we didn’t use in the example:

transition-delay: Delay before the transition should start, specified in seconds, e.g. 1s

transition-timing-function: The value of timing function allows you to change the speed of the transition over time by defining one of six possibilities: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier (which allows you to define your own timing curve).

Simply try each of these timing function values to see how they differ. The default value is ease and should work just fine for short transitions. They're a relatively recent feature, This works great for people with modern browsers but users who are still on older browsers won't be able to view them as animations. CSS3 transitions are implemented on the following browsers:

Safari 3.2+ (introduced 2008)

Firefox 4+ (2009)

Google Chrome 7+ (introduced 2010)

Opera 10.50+ (introduced 2010)

FireFox 3.7 was proposed to launch with CSS transition support, But For some reason, FireFox canceled the launch and announced 3.7 would enter production as version 4.

Although not all browsers support CSS transitions, the fact that they’re declared separately from the properties that are changing means that those changes will still be apparent in browsers without support for transitions. The browsers that lack support for CSS transitions will still apply the :hover(or other) state just fine, except that the changes will happen instantly rather than being transitioned over time.

To provide the same effect as CSS3 transitions on older browsers, we are going to use JavaScript to provide support only for those browsers that lack native support, but instead of handling all of the cross-browser challenges of smooth animation ourselves, we can make use of jQuery's .animate() features to provide the same animation effect if it can't be done in the current browser using CSS3.

As I said earlier, jQuery doesn't support animating color changes, for this to work we will use the jQuery UI to add this functionality, but we don’t need all the code and it seems like overkill at +200kb. We can grab just what we need, so if we want to animate color, all we’ve got to include is the following code. I got if from the latest jQuery UI (currently 1.8.14)

Next, we use an open source JavaScript library called Modernizr, it allows us to test for individual features of HTML5 and CSS3 in our users browsers. Instead of testing just for a particular browser and trying to make decisions based on that, Modernizr allows us to ask specific questions like: "Does this browser support CSS3 transitions?" and receive a clear "yes" or "no" answer.

Again we don't need the entire library, fortunately new in Modernizr2 is the ability to customize your JavaScript download, So now if you do not care for a particular feature (let's say Drag and Drop), you can unclick it and not have Modernizr check for it. Read more about it here.

Here is the code we need from the Modernizr library. It's only 1kb (Modernizr 2.0.6 - Custom Build)

That's all, folks!

Like all shiny new tools, use it with care and caution. One can simply go overboard adding color transitions to a lot of elements on the page, resulting in some sort of annoying, pulsating monster. It’s important to use CSS transitions where it makes sense, enhancing the user experience—and skip it everywhere else. Additionally, making sure the speed of the transition doesn't slow down an otherwise snappy action from the user is crucial. It's important to use transitions appropriately.