CSS transition not working on Chrome - css

Question

I've got some CSS code that works on Mozilla Firefox and doesn't on Google Chrome.
.lightBtn {
width: 500px;
height: 49px;
color: #000000;
background: white;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
display: inline-block;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.lightBtn:hover {
background: black;
color: white;
}
.lightBtn span {
display: inline-block;
position: relative;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.lightBtn span:after {
content: '>>';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.lightBtn:hover span {
padding-right: 25px;
}
.lightBtn:hover span:after {
opacity: 1;
right: 0;
}
<button class="lightBtn" ><span>Special effect</span></button>
<p>Hover over the div element above, to see the transition effect.</p>
In Mozilla font color transition works well changing from black to white and in Chrome it just changes to white after specified time. How can I fix it?
I checked basic transition and it works well, but while adding animation on hover, the transition of color itself doesn't work. This is animation I'm trying achieve. Originally it's without font color transition.
Both color transition and animation work in separate, but when combined, the font color transition isn't working (in Google Chrome). You can check on Mozilla what I'm trying to achieve.

Answer 1

I'm not thrilled with this answer, but a pared down version of your code (without losing any of the pseudo-elements or effects like other answers here) shows inconsistent results on mouseIn and mouseOut after many repeated attempts. Every 3rd or 4th hover, the pseudo-element content >> will start to appear immediately, and then slowly solidify. The rest of the times I hover, it has the lag you're experiencing.
In summation, this looks like a WebKit rendering bug. I've filed one here: https://bugs.webkit.org/show_bug.cgi?id=163078 so I will check back once some progress has been made on that.
This pared down version does remove the delay in your Special effect text from showing, though. I normalized the transition timings for that.
.lightBtn {
width: 500px;
height: 49px;
color: #000000;
background: white;
display: inline-block;
}
.lightBtn:hover {
background: black;
color: white;
}
.lightBtn span {
display: inline-block;
position: relative;
transition: 0.25s;
}
.lightBtn span::after {
content: '>>';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.25s;
}
.lightBtn:hover span {
padding-right: 25px;
}
.lightBtn:hover span::after {
opacity: 1;
right: 0;
}
<button class="lightBtn"><span>Special effect</span></button>
<p>Hover over the div element above, to see the transition effect.</p>

Answer 2

If you have
transition: all 0.25s;
There is no need for
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
the 0.25s will be the duration, in your case, it might be your browser version, becasue it works for me, and i'm using chrome.
Try to add this and see if it helps, since you said the time works, but no animation, so I would think it's becasue you still need the webkit prefix.
-webkit-transition: all 0.25s;

Answer 3

Well, let's go over a few things:
First you go on to declare transition-duration: 0.2s; and -webkit-transition-duration: 0.2s;, then you declare a transition: all 0.25s;, which overrides the value declared on the two previous properties.
You have all as the value for transition, this is not desirable as it hits performance.
If you set transition: all .25s; for setting the initial transition, then override the properties with a transition-property: background-color, border, box-shadow, color;, the transition should work just fine.
Here is a JSFiddle with your functional code.
If nothing done here works for you, then it might be that your browser is outdated, as already pointed out by everybody else.

Answer 4

Looks like same ff and chrome.
.lightBtn {
color: #000000;
background: white;
height: 49px;
border: 2px solid white;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
border-radius: 0px 8px 8px 0px;
font-size: 16px;
font-family: Audiowide;
display: inline-block;
transition: all 0.25s;
cursor: pointer;
}
.lightBtn:hover {
background: black;
color: white;
border: 2px solid rgba(12, 1, 29, 0.87);
box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19);
}
<a class="lightBtn">
Hi guys!
</a>
<button class="lightBtn">
Wassup
</button>

Answer 5

What happens if you strip out all the other stuff so that the code is as basic as possible? Does this work? If so then you probably need to sort through some specificity issues or something along those lines... or maybe your chrome version is out of date (though that seems rather unlikely).
This works for me in chrome and FF btw.
<!DOCTYPE html>
<html>
<head>
<style>
.lightBtn {
width: 100px;
height: 100px;
color: #000000;
background: white;
height: 49px;
border: 2px solid white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
border-radius: 0px 8px 8px 0px;
font-size: 16px;
font-family: Audiowide;
display: inline-block;
transition: all 0.25s;
cursor: pointer;
}
.lightBtn:hover {
background: black;
color: white;
border: 2px solid rgba(12, 1, 29, 0.87);
box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19);
}
</style>
</head>
<body>
<span class="lightBtn"></span>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>