Adding Transition to background:linear-gradient

Question

this is my HTML:

<nav role="navigation">
<div align="center">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="games.php">Games</a></li>
<li><a href="trivia.php">Trivia</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</nav>

Here's my CSS:

nav {
 background:linear-gradient(#0099cc,#0e2377);
 width: 100%;
 box-shadow: 0px 3px 12px 2px #000;
 height: 80px;
}

nav ul {
 margin: 0;
 list-style: none;
}

nav li {
 display: inline-block;
 line-height: 80px;
 font-size: 28px;
 word-spacing: 12px;
}

nav a {
 display: block;
 text-decoration: none;
 color: #fff;
 padding-left: 20px;
 padding-right: 20px;
 padding-top: 0px;
 padding-bottom: 0px;
}

nav li:hover a {
 color: #fff;
}

nav li:hover { 
 background:linear-gradient(#cc0000,#660000);
 height: 80px;
}

Here's a JSFIDDLE: https://jsfiddle.net/z6rae3fL/

How do I add the following CSS when someone hovers over the <li> ? I understand this is quite tricky because it's a linear-gradient

 transition: .4s;
 -moz-transition: .4s;
 -webkit-transition: .4s;
 -ms-transition: .4s;

Answer 1

The closest you can get is to have two nodes stacked on top of each other, one with each gradient you want, and transition the opacity of the top one:

 #container { position:relative; width: 100px;height:100px; } #one, #two { position:absolute; top:0;left:0;right:0;bottom:0; } #one { background: linear-gradient(red, blue); } #two { background: linear-gradient(white, black); transition: opacity 1s; } #two:hover { opacity:0 } 

 <div id="container"> <div id="one"></div> <div id="two"></div> </div>