CSS3 buggy hover/transition effect

Question

I'm having a problem with hovering over links on my site. Note: I'm using white font on black background. I have several links--just typical

<a href="link.com" target="_blank" class="ext_link">Click here</a>

My css:

.ext_link {transition:0.5s; -webkit-transition:0.5s;}
.ext_link:hover {color:rgba(125, 249, 255, 1); opacity:0.75;}

When I hover over one of these links, the animation happens supper chunkily--it looks like the link starts going grey for a second, then suddenly turns that blue color without any transition. Then, when I take the mouse off, the process happens in reverse. The link abruptly turns grey and then fades back to its original white color.

This is a new bug--my site was working fine up until two days ago. Also note that this bug only happens on MY computer. When I access my site on anyone else's computer, the animation is working just fine.

I've tried clearing the cache, restarting the browser, etc.

Answer 1

I think now it's OK:
check this [ LINK ]
I don't see anything wrong here but sometimes for accelerating your transition you may add transform: translateZ(0) with venders to your element.

body {
    background: black;
}
.ext_link {
    font-size: 5em;
    color: white;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ext_link:hover {
    color:rgba(125, 249, 255, .75);         
}