demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Animating CSS3 Gradients With Filters

css / gradients

Estimated reading time: 2 minutes, 15 seconds

Officially, can’t yet be animated. However, using CSS3 , you can animate the color values within them, with a few conditions.

hue-rotate in both CSS and (from which CSS3 filters are derived) moves the visual appearance of an element around the hsl color wheel: red at the top at 0 degrees, green at 120, etc. You might wish to think of hue-rotate as a filter that makes color values “redder”, “bluer”, etc, although its effects are usually more overt than that.  The hue-rotate filter is given a degree value depending where it is on the wheel: adding filter: hue-rotate(0deg) to an element that is purely red will make no difference, but increasing the degree value will shift the color of the element through the spectrum.

hsl color wheel
hue-rotate transition of red-blue gradient through 360 degrees

Filters can be animated, as I’ve shown previously, so we can apply an animated hsl filter to a gradient to sweep it through a range of colors. (I’ve activated the animations shown in this article on mouse hover, to reduce visual overkill. Because CSS3 filters currently only work in Webkit, the examples will only work in Safari or Chrome at this writing.)

The example on the left is fairly simple: a red-to-blue gradient hue-rotated through the entire spectrum. Stripped of vendor prefixes, the is:

div { width: 100px; height: 200px; background: linear-gradient(#ff0000 0%, #1600ff 100%); transition: 8s filter linear; }
div:hover { filter: hue-rotate(360deg); }

The second example at the top of this article uses an angled linear radient and CSS keyframes to produce an endless sweep of color:

@keyframes sweep {
  100% { filter: hue-rotate(-60deg); }
}
div { background: linear-gradient(30deg, #030 0%, hsl(55, 100%, 20%) 100%)l width: 768px; height: 200px; }
div#sweep:hover {  animation: sweep 3s alternate infinite; }

Note that hue-rotate works from the current hue of the element: it doesn’t jump to 0 degrees on the color wheel and proceed from there for every gradient.

While this technique works, it carries two major disadvantages:

  • The colors used in the animation will always be presented in the order that hues occur in the color wheel: you cannot use this technique to transition directly from red to blue, for example. (You could, however, “leap” the gradient using the step animation option, or reverse through the color wheel by using negative values).

  • Second, greyscale values can’t be animated this way: they lack any hue component to transition.

Under those limitations, the technique is a useful one; for broader application, also has an gradient and animation option, but discussion of that will have to wait for another article.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.