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:

<style>
.encapsulated li{
font-size: 16px;
text-transform: uppercase;
margin: 0;
letter-spacing: .04em;
line-height: 72px;
list-style-type: none;
border-bottom: solid 1px #0c445d;
}
.encapsulated a{
display: block;
color: #1fb9ef;
padding: 0 0.846em;
background: linear-gradient(to left, #093447 50%, #072634 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: background .25s ease-out;
}
.encapsulated a:hover{
background-position: left bottom;
}
</style>
<div class="encapsulated">
<ul>
<li><a href="/">Home</a></li>
<li><a href="work">Work</a><li>
<li><a href="blog">Blog</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</div>
view raw gistfile1.txt hosted with ❤ by GitHub