2

我正在尝试制作一个简单的 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/

4

2 回答 2

4

我相信这是因为在你的关键帧中，你使用的是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-我上面显示的前缀。

于 2013-05-30T22:45:14.013 回答
3

来自MDN 关于转换的文章：

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不需要前缀）

于 2013-05-30T22:45:33.760 回答