title: Animating the border color of an <input>: border turns black first
body: <p>When I try to animate the border-color of an  the border first turns black, then turns blue (blue is the color I want it to be). The black intermezzo looks really ugly, so I came here to ask if it is a known issue and if there is a workaround.</p>
  
  <p>A JSFiddle: <a href="http://jsfiddle.net/ZBWQx/" rel="nofollow">http://jsfiddle.net/ZBWQx/</a></p>
  
  <p>The CSS involved:</p>
  
  <pre><code>input:not([type="submit"]) {
      border-radius: 5px;
      height: 25px;
      padding: 3px;
  }
  input:not([type="submit"]):focus {
      border-color: #6d9eeb;
      transition-property: border-color;
      transition-duration: 0.5s;
      -webkit-transition-property: border-color;
      -webkit-transition-duration: 0.5s;
      -o-transition-property: border-color;
      -o-transition-duration: 0.5s;
      -moz-transition-property: border-color;
      -moz-transition-duration: 0.5s;
  }
  input {
      outline: 0;
  }
  </code></pre>
  
  <p>Although I did use the other vendor prefixes above, portability is not important. It only needs to work in Chrome. (But it might be convenient for future readers to find a solution working in Firefox too here.)</p>