google-chrome - の境界線の色をアニメーション化する: 境界線が最初に黒くなります

Question

境界線の境界線の色をアニメーション化しようとすると、最初に黒に変わり、次に青に変わります(青は私が望む色です)。黒いインターメッツォは本当に醜いので、これが既知の問題であるかどうか、および回避策があるかどうかを確認するためにここに来ました。

JSFiddle: http://jsfiddle.net/ZBWQx/

関連する CSS:

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;
}

上記の他のベンダー プレフィックスを使用しましたが、移植性は重要ではありません。Chrome でのみ動作する必要があります。(しかし、将来の読者にとっては、Firefox でも機能する解決策をここで見つけると便利かもしれません。)