Animating CSS3 Gradients

The CSS3 Transitions spec maintains a list of properties that are animatable. This list, as far as I know, covers animatable properties for both transitions and keyframe animations.

But that’s a list of properties. And so, since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.

Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.

To demonstrate this, I’ve created some CSS3 buttons that animate their gradients when you hover over them:

• View Demo

There’s nothing too complicated going on in the code here, and I’m certainly not the first one to write about or demonstrate this technique. But here’s the code from the second button in that demo page, just so you can see how this is done:

.two:link, .two:visited {
	background: #2876b2;
	background: -webkit-linear-gradient(#2876b2, #549ad0);
	background: -moz-linear-gradient(#2876b2, #549ad0);
	background: -o-linear-gradient(#2876b2, #549ad0);
	background: -ms-linear-gradient(#2876b2, #549ad0);
	background: linear-gradient(#2876b2, #549ad0);
	background-repeat: repeat;
	-webkit-background-size: 100% 200%;
	-moz-background-size: 100% 200%;
	background-size: 100% 200%;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	-ms-transition: all .5s linear;
	transition: all .5s linear;
}

.two:hover, .two:focus, .two:active {
	background-position: 0 -102%;
}

I’ve explicitly defined the background on this button to repeat, but I didn’t need to do that; it will repeat by default. This is just to help illustrate what’s happening here. On hover, I’ve changed the background position, and when you combine this with the background-size value, it creates a slide-down type of effect. So the gradient, which repeats, is simply moving to a different position.

I’ve also kept the same state for hover, focus, and active, but you can animate to different states for all of those pseudo-classes.

The other gradient buttons on the demo page are a little more abstract in their animated behaviour, but the principle is basically the same: I have a set, repeating gradient with unique background-size values, and I’m animating the background by adjusting the background-position and/or background-size values.

I used this technique for the buttons on the HTML9 Boilerstrap website.

The possibilities with this are endless, but my silly little examples should serve to illustrate the concept. I’m sure you can come up with some nice effects with this technique, so post some in the comments if you like. If you want some nice gradients to mess around with, you can grab something from Lea Verou’s gradient pattern gallery.

• View Demo

Source : http://www.impressivewebs.com/animating-css3-gradients