title: CSS transition fade back to original text color
body: <p>Well I have successfully made my text transition to a different color with a 1s delay, but upon the mouse no longer hovering over the element, I cannot figure out how to make it do a transition back to the original color without going to it immediately.</p>
  
  <p>I looked around online and cannot find much to help. If anything that I found, I couldn't figure out how to piece it together to make it work properly.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="navbar"&gt;
  &lt;div id="navlinks"&gt;
  &lt;nav&gt;
  &lt;ul id="navlist"&gt;
  &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;ASSIGNMENTS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;DREAM CARS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{
  margin:0 auto;
  }
  #logo{
  margin:auto;
  width:430px; 
  }
  #navbar{
  width:100%;
  height:50px;
  display:table;
  margin:auto;
  }
  #navlinks ul {
  display:table;
  border-collapse:collapse;
  width:100%;
  margin:0 0 20px;
  padding:0;
  list-style:none;
  }
  #navlinks li {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  width:20%;
  background: linear-gradient(to right, #111 50%, #444 50%);
  background-size: 200% 100%;
  background-position:left top;
  transition:all 1s ease;
  -webkit-transition-delay:all 1s ease;
  -moz-transition-delay:all 1s ease;
  -ms-transition-delay:all 1s ease;
  -o-transition-delay:all 1s ease;
  }
  #navlinks li:hover{
  background-position:right top;
  }
  #navlinks a {
  text-decoration:none;
  color: #999;
  text-transform: uppercase;
  display:block;
  padding-top:10px;
  padding-bottom:10px;
  font: bold 12px/25px Arial, Helvetica;
  }
  
  #navlinks a:hover{
  color:black;
  transition:all 1s ease;
  -webkit-transition-delay:all 1s ease;
  -moz-transition-delay:all 1s ease;
  -ms-transition-delay:all 1s ease;
  -o-transition-delay:all 1s ease;
  }
  </code></pre>
  
  <p>I also attempted to follow jquery tutorials on this, and it simply had done nothing to the pages at all.</p>
  
  <h1><a href="http://jsfiddle.net/KHn3Z/" rel="nofollow">Demo in Jsfiddle</a></h1>