title: possible to transition outline color with css3
body: <p>Is it not possible to transition outlines with css3?</p>
  
  <pre><code>body{margin:10px;padding:0px;}
  #tDiv{
      background-color:#999;
      width:500px; 
      height:500px;
      color:black;
     outline: 5px dashed #222; 
      -moz-transition: color 2s;
      -o-transition: color 2s;
      -webkit-transition: color 2s;
      transition: color 2s;
      -moz-transition: outline-color .7s ease-out;
      -o-transition: outline-color .7s ease-out;
      -webkit-transition: outline-color .7s ease-out;
      transition: outline-color .7s ease-out;
      -moz-transition: background-color .7s ease-out;
      -o-transition: background-color .7s ease-out;
      -webkit-transition: background-color .7s ease-out;
      transition: outline-background .7s ease-out;   
  }
  #tDiv:hover{
      color:green;
      background-color:gold;
      outline: 5px dashed magenta;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/loren_hibbard/uKGCc/" rel="noreferrer">http://jsfiddle.net/loren_hibbard/uKGCc/</a></p>
  
  <p>This just changes the outline immediately..</p>
  
  <p>Thanks</p>
  
  <p>​</p>