The animation style Not working with Chrome - css-animations

Question

animation style working fine with mozilla and changes color after 5sec but when I tried to run same code on chrome then its not taking that effect??
Style:
.changeColor{
animation: change 5s step-end both;
}
#keyframes change {
from { color: red }
to { color: #4D4D4D }
}
HTML:
<label class="changeColor">XYZ</label>

Answer 1

Internet Explorer 10, Firefox, and Opera supports the #keyframes rule and animation property.
Chrome and Safari requires the prefix -webkit-.
#keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
When the animation is created in the #keyframe, bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
Specify the name of the animation
Specify the duration of the animation
Note: Internet Explorer 9, and earlier versions, does not support the #keyframe rule or animation property.
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}