CSS3 Color Animations
CSS3 animations allow you to alter the values of CSS properties over time. They’re now supported in Firefox 5+, Chrome, Safari 4+, iOS, Android 4+, and the upcoming IE10, therefore, using them in real production websites is possible. One of the cool things you can do with them is change the color of an element using exclusively CSS. Previously a technique like this was only possible using JavaScript’s setInterval function to gradually change the appropriate property of the element. See jQuery UI’s animate demos for a good example.
Getting Started
Let’s start with a basic example (note — Whether or not you see the animation depends on whether your browser supports CSS3 animations. You can check at caniuse.com.
Basic example of a color animation Open in New Window
Syntax
Let’s break this down how this works one section at a time.
The animation property is how you define a CSS3 animation. The MDN (Mozilla Developer Network) docs have extensive documentation on all the various sub properties available to configure the animation here. In this example I’m setting…
- color_change — This refers to a named @keyframes rule, which we’ll get into in a minute.
- animation_duration : 1s — The animation should last 1 second.
- animation_iteration_count : infinite — The animation will cycle forever.
- animation_direction : alternate — This will tell the animation to alternate, from start to end, then end to start, then start to end, and so on. In this example it keeps the box from being jerky by quickly switching from red to blue.
For readability you can also list the properties out individually.
/* Note: Prefixes omitted, see below */ div
Prefixes
The vendor prefixes are necessary because CSS3 animations are still considered an experimental feature (the spec is still in working draft status. However, the syntax is consistent across modern browsers, so you only have to copy and paste the code to add all the necessary prefixes. Always include the un-prefixed property last to make your code future friendly to browsers that add un-prefixed support. For an up to date list of what browsers support CSS3 animations and which prefixes to use check out the CSS animation page at caniuse.com.
If you get sick of typing out all the vendor prefixes you’re not alone. -prefix-free is a tool by Lea Verou that lets you write your CSS unprefixed. A JavaScript file detects whether a browser prefix is necessary, which one to use, and applies it automatically.
Another option is Prefixr by Jeffrey Way of nettuts. It lets you copy and paste your code in, run it, and have the appropriate prefixes added automatically.
Browser prefixes have been been a hot topic lately after it was announced that IE, Firefox, and Opera are considering adopting support for -webkit prefixes. If you’re curious a number of others have written about this.
Keyframes
@-webkit-keyframes color_change < from < background-color: blue; >to < background-color: red; >> @-moz-keyframes color_change < from < background-color: blue; >to < background-color: red; >> @-ms-keyframes color_change < from < background-color: blue; >to < background-color: red; >> @-o-keyframes color_change < from < background-color: blue; >to < background-color: red; >> @keyframes color_change < from < background-color: blue; >to < background-color: red; >> Keyframes are a way of specifying a set of properties and their values at different states of an animation. @keyframes color_change gives the @keyframes a name of color_change . This provides the connection used on the animation property above.
This animation only has 2 steps, a start and an end. Since such animations are quite common, the spec provides the keywords from and to for defining the state of properties at the beginning and end of the animation. This could also have been written using percentages for the steps.
If the animation has more than 2 steps, they can be listed using multiple steps as such.
Real-World Example
Since the first demo was rather contrived, I thought I’d provide an example of how you could use this technique in the real world. On buttons, a common UI pattern is to provide the user with visual feedback that they’re on the button by applying a subtle color change. This is usually done by applying a different background-color on the hover pseudoclass of the button as such:
To improve upon this, we can add a CSS 3 color animation to gradually make the color transition. The following example shows each side by side:
Color animation on a button Open in New Window
Falling Back Gracefully
Since CSS3 animations are only present in modern browsers, there’s a good chance a number of your users won’t have them available. Luckily, CSS3 animations fallback gracefully to browsers that don’t support them. If the browser doesn’t know how to handle a CSS animation, it just ignores the CSS rules. Therefore, make sure not to use CSS animations to perform functionality that is vital to your site or application, it should simply enhance the user experience.
In the button example above if the browser can’t perform the animation, the animated button will simply fallback on the hover button’s behavior.
Detect Support and Polyfill
If you have a CSS color animation that you absolutely must have work on all browsers back to IE6, you can do so by detecting support via Modernizr, and falling back to jQuery UI’s animation.
if (!Modernizr.cssanimation) < $('button').on('mouseover', function() < //jQuery UI doesn't support the hotpink keyword :( $(this).animate(< backgroundColor: '#FF69B4' >, 1000); >).on('mouseout', function() < $(this).stop(true, true); $(this).css('backgroundColor', 'pink'); >); > Live example (this should work across all browsers):
Color animation polyfilled Open in New Window
If the jQuery UI approach already works cross browser why would you bother doing this with CSS?
- Certain desktop and mobile browsers can use hardware acceleration with CSS3 animations. This usually results in the animation rendering smoother.
- Users with JavaScript disabled will still see the animation.
- If you’re only using jQuery & jQuery UI for this animation you can save yourself two HTTP requests by using Modernizr’s load function. This will first test whether the browser supports CSS animations, if it does nothing needs to be done, if it doesn’t all scripts listed in the nope parameter will be loaded.
Summary
CSS 3 color animations can be used in modern browsers today. For most use cases no animations in unsupported browsers isn’t a problem, and, if it is, jQuery UI can be used to polyfill the functionality.
4 Ways to Animate the Color of a Text Link on Hover
Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors. There are four different techniques we can use to do this. Let’s look at those while being mindful of important things, like accessibility, performance, and browser support in mind. Let’s get started!
Technique 1: Using background-clip: text
At the time of writing, the background-clip: text property is an experimental feature and is not supported in Internet Explorer 11 and below. This technique involves creating knockout text with a hard stop gradient. The markup consists of a single HTML link ( ) element to create a hyperlink:
We can start adding styles to the hyperlink. Using overflow: hidden will clip any content outside of the hyperlink during the hover transition:
We will need to use a linear gradient with a hard stop at 50% to the starting color we want the link to be as well as the color that it will change to:
Let’s use background-clip to clip the gradient and the text value to display the text. We will also use the background-size and background-position properties to have the starting color appear:
Finally, let’s add the transition CSS property and :hover CSS pseudo-class to the hyperlink. To have the link fill from left to right on hover, use the background-position property:
While this technique does achieve the hover effect, Safari and Chrome will clip text decorations and shadows, meaning they won’t be displayed. Applying text styles, such as an underline, with the text-decoration CSS property will not work. Perhaps consider using other approaches when creating underlines.
Technique 2: Using width/height
The CSS is similar to the previous technique minus the background CSS properties. The text-decoration property will work here:
To keep the text from wrapping to the next line, white-space: nowrap will be applied. To change the link fill color, set the value for the color CSS property using the ::before pseudo-element and having the width start at 0:
While this technique does the trick, using the width or height properties will not produce a performant CSS transition. It is best to use either the transform or opacity properties to achieve a smooth, 60fps transition. Using the text-decoration CSS property can allow for different underline styles to appear in the CSS transition. I created a demo showcasing this using the next technique: the clip-path CSS property.
Technique 3: Using clip-path
For this technique, we will be using the clip-path CSS property with a polygon shape. The polygon will have four vertices, with two of them expanding to the right on hover: The markup is the same as the previous technique. We will use a ::before pseudo-element again, but the CSS is different:
Unlike the previous techniques, text-decoration: underline must be declared to the ::before pseudo-element for the color to fill the underline on hover. Now let’s look into the CSS for the clip-path technique:
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);- 0 0 = top left
- 0 0 = top right
- 100% 0 = bottom right
- 0 100% = bottom left
The direction of the fill effect can be changed by modifying the coordinates. Now that we have an idea for the coordinates, we can make the polygon expand to the right on hover:
This technique works pretty well, but note that support for the clip-path property varies between browsers. Creating a CSS transition with clip-path is a better alternative than using the width / height technique; however, it does affect the browser paint.
Technique 4: Using transform
The markup for this technique uses a masking method with a element. Since we will be using duplicated content in a separate element, we will use aria-hidden=»true» to improve accessibility — that will hide it from screen readers so the content isn’t read twice:
The CSS for the element contains a transition that will be starting from the left:
Next, we need to get the to slide the right like this:
To do this, we will use the translateX() CSS function and set it to 0:
Then, we will use the ::before pseudo-element for the , again using the data-content attribute we did before. We’ll set the position by translating it 100% along the x-axis.
Much like the element, the position of the ::before pseudo-element will also be set to translateX(0) :
While this technique is the the most cross-browser compatible of the bunch, it requires more markup and CSS to get there. That said, using the transform CSS property is great for performance as it does not trigger repaints and thus produces smooth, 60fps CSS transitions.
We just looked at four different techniques to achieve the same effect. Although each has its pros and cons, you can see that it’s totally possible to slide in a color change on text. It’s a neat little effect that makes links feel a little more interactive.