Question

我正在尝试使用简单的css3动画。到目前为止它在Firefox中运行良好，但在Chrome或Safari中无效。

我添加了@-webkit-keyframes因此它应该适用于所有浏览器（可能不在IE中）。

这是我的css：

.myFace {
        display: block;
        width: 266px;
        height: 266px;
        background: url(http://cl.ly/image/443k292m2C24/face2x.png) no-repeat 0 0;}
.myFace:hover {
    animation: threesixty 1s;
    -webkit-animation: threesixty 1s; /* Safari and Chrome */
}
@keyframes threesixty {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes threesixty {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

这就是我要做的 - 的 http://jsfiddle.net/dansku/JTcxH/4/

Answer 1

我相信这是因为在你的关键帧中，你正在使用transform:，它适用于IE10，Firefox和Opera，但还没有得到webkit等价物 - 特别是-webkit-transform可以工作适用于Chrome和Safari。

@keyframes threesixty {
  0% {
    transform: rotate(0deg);
    -webkit-rotate(0deg);
    -ms-transform:rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-rotate(360deg); 
    -ms-transform:rotate(360deg);
  }
}
@-webkit-keyframes threesixty {
  0% {
    transform: rotate(0deg);
    -webkit-rotate(0deg);
    -ms-rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-rotate(360deg);
    -ms-rotate(360deg);
  }
}

对于10之前的IE版本，您还应该包含我上面显示的-ms-前缀。

Answer 2

来自MDN article on transforms：

Webkit浏览器（Chrome，Safari）仍然需要-webkit前缀用于转换，而Firefox（从版本16开始）则不需要。

此代码应该为您完成任务：

@keyframes threesixty {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg); }
  }
@-webkit-keyframes threesixty {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

对于Opera和IE9 +支持，分别使用-o和-ms前缀。（IE10不需要前缀）

CSS3动画不适用于chrome或safari

2 个答案: