css3 triangle with :before opacity transition not working properly

Question

So, on my code, I have an anchor to which I added a :before in order to create a css triangle. I'm trying to get an opacity transition to display the triangle whenever you hover over the anchor. But for some reason a lot of times if you ''rush in'' on the link it skips the transition and it shows the triangle with full opacity, however, if you gently hover through just about the border of the link the transition works. I'm wondering what it is that I'm doing wrong... Also, I noticed (if I'm not being crazy) that on jsFiddle it works a little better, but then again, I did change my code slightly to include just this part. You might have to play with it a little, from different angles, to see what I'm saying.

Lastly, the transition does not apply when you move the pointer from outside the anchor.

Here is my code : JSFIDDLE

Answer 1

I think this fixes your issue:

http://jsfiddle.net/PhE59/3/

Basically I moved the border declaration outside of the hover statement:

a:first-child:before {
        border-bottom: 63px solid black;
    border-left: 186px solid transparent;
}
a:last-child:before {
    border-bottom: 63px solid black;
    border-left: 150px solid transparent;
}
a:first-child:hover:before {
    opacity:1;  
}

which doesn't force the creation and removal of borders on every hover, instead creating the borders only once (on page load) and letting the animation go smoothly by only effecting the opacity.

there are still issues if you hover quickly which would be handled by reducing the animation time to lower than 1s