Animated Gradients

I wanted to add a little spice to the hover states of my navigation and found a nice technique to animate a gradient, giving the impression that a background color will fill from left to right.

First, on the hyperlink, specify the following style declarations:

• background: linear-gradient(to left, {original color} 50%, {fill color}, 50%); // specify the gradient
• background-size: 200% 100%; // set the background size to 2 times larger than the elements width
• background-position: right bottom; // default to the original background color
• transition: background, .25s, ease-out; // specify the background as the property for the transition, along with the effect duration and speed curve

For the hover state, specify the following style declaration:

• background-position: left bottom;

Putting it altogether: