Question

动画样式与mozilla一起正常工作并在5秒后改变颜色但是当我试图在chrome上运行相同的代码时它没有采取这种效果？

样式：

.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 */
 }

动画样式不适用于Chrome

1 个答案: