CSS3 gradient transition with background-position

Although you can’t directly animate gradients using the CSS transition property, it is possible to animate the background-position property to achieve a simple gradient animation:

The code for this is dead simple:

#DemoGradient{
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);
    background: -moz-linear-gradient(#C7D3DC,#5B798E);
    background: -o-linear-gradient(#C7D3DC,#5B798E);
    background: linear-gradient(#C7D3DC,#5B798E);
    
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    
    background-size:1px 200px;
    border-radius: 10px;
    border: 1px solid #839DB0;
    cursor:pointer;
    width: 150px;
    height: 100px;
}
#DemoGradient:Hover{
    background-position:100px;
}

<div id="DemoGradient"></div>

If you have any questions, feel free to comment and ask!
I always appreciate a challenge.