动画风格不适用于Chrome

Question

动画风格与mozilla工作正常，5秒后改变颜色，但当我试图在铬上运行相同的代码，然后它不采取这种效果？

风格：

.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和Opera支持的@keyframes规则和动画属性。 Chrome和Safari需要前缀-webkit-。

@keyframes myfirst 
{ 
from {background: red;} 
to {background: yellow;} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
from {background: red;} 
to {background: yellow;} 
} 

在@keyframe中创建动画时，将其绑定到选择器，否则动画将不起作用。

绑定由至少指定这两个CSS3动画属性动画给选择：

• 指定动画

• 的名称指定动画的持续时间

注意：Internet Explorer 9及更早版本不支持@keyframe规则或动画属性。

div 
{ 
animation: myfirst 5s; 
-webkit-animation: myfirst 5s; /* Safari and Chrome */ 
}