CSS transition not working on Chrome
<p>I've got some CSS code that works on Mozilla Firefox and doesn't on Google Chrome.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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: '&gt;&gt;';
    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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="lightBtn" &gt;&lt;span&gt;Special effect&lt;/span&gt;&lt;/button&gt;

&lt;p&gt;Hover over the div element above, to see the transition effect.&lt;/p&gt;</code></pre>
</div>
</div>
</p>
<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?</p>
<p>I checked basic transition and it works well, but while adding animation on hover, the transition of color itself doesn't work. <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate1" rel="nofollow noreferrer">This is animation I'm trying achieve</a>. 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.</p>