/* I have this very simple example that does not animate the changing of the background gradient; is it not possible to animate that? */
header nav a {
color: #fff;
width: 100px;
display: block;
padding: 10px;
height: 20px;
background: -webkit-gradient(linear, 100% 0%, 0% 0%, from(rgba(0,0,0,1)), to(rgba(0,0,0,.5)));
text-decoration: none;
font-weight: bold;
letter-spacing: -2px;
-webkit-transition-property: all;
-webkit-transition-duration: 100ms;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: initial;
}
header nav a:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0)));
letter-spacing: 0px;
}