title: CSS color-transition not working on :hover
body: <p>Another question with using CSS.</p>
  
  <p>I would like to have the header's background-color transitioning from it's current to another when hovering (due to multiple sites having different colors).</p>
  
  <p>I made a <a href="http://jsfiddle.net/Lodgike/ezs40t9w/" rel="nofollow">CSS-transition-animation</a> for it, but it doesn't seem to be working.
  What am I doing wrong?</p>
  
  <pre><code>        #header
      {
      background-color: #3cff9c;
      float: left;
      text-align: center;
      width: 100%;
      }
  
      #header:hover
      {           
      /*Animation*/
      -webkit-animation: colorChange_blue 1s; /* Safari, Chrome, Opera*/
      -moz-animation: colorChange_blue 1s; /*Firefox*/
      animation: colorChange_blue 1s; /*Standard*/
  
      /*Safari, Chrome, Opera*/
      @-webkit-keyframes colorChange_blue 
      {
      from 
          {background-color;}
      to   
          {background-color: #008c74;}
      }
  
      /*Firefox*/
      @-moz-keyframes colorChange_blue
      {
      from
          {background-color: currentColor;}
      to
          {background-color: #008c74;}
      }
  
      /*Standard*/
      @keyframes colorChange_blue
      {
      from
          {background-color: currentColor;}
      to
          {background-color: #008c74;}
      }
  }
  </code></pre>