边框颜色过渡css3错误

Question

I was trying to do a transition on a border-color property on my website, but I have a little bug on it and I don't know where he comes from.

When my mouse is on the button/link, the border becomes blue and then the transition comes. I tried this code on firefox/chrome/opera and this problem appear on all of them, so it's probably an error from me.

You can see the problem there: http://jsfiddle.net/u3Ahk/15/

.bouton a {
    transition: background-color 1s, border-color 1s;
    padding: 5px 7px 8px 7px;
    text-decoration: none;
}

Thanks in advance !

Answer 1

You have a zero-width border without an explicit color, that changes to a grey 1-pixel border on hover, and you're trying to transition only border-color . That doesn't really work — what happens is that the width changes to 1 pixel immediately, and then you have a blue border changing to a grey border. You're changing one thing but transitioning something else entirely.

The reason why the border starts off blue is because you didn't specify a border color for the initial state, so it takes on the text color which is also blue. That is by design , not a bug in any browser. I can't tell what exactly about the border you want to transition (width only, color only, or both?), so it's difficult to propose a solution.

Answer 2

Updated fiddle.

Explicitly state the transparent border in the normal state of the link:

.bouton a {
    transition: background-color 1s, border-color 1s;
    padding: 5px 7px 8px 7px;
    text-decoration: none;
    border: 1px solid transparent; /* this */
}