Animated Gradients

gistfile1.txt

<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>