Question

http://jsfiddle.net/x3Kc7/1/

.play {
    border-radius: 50px;
    height: 90px;
    width: 90px;
    transition: all .2s ease-out, background 2s ease-in;
    -o-transition: all .2s ease-out, background 2s ease-in;
    -ms-transition: all .2s ease-out, background 2s ease-in;
    -moz-transition: all .2s ease-out, background 2s ease-in;
    -webkit-transition: all .2s ease-out, background 2s ease-in;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    box-shadow: 0 0 5px #888;

}

.play:hover {
    transform: scale(1.2);
}

此代码在firefox中完美运行，但不适用于chrome。什么是不正确的？

Answer 1

转换属性需要-webkit供应商：-webkit-transform: scale(1.2)，否则Chrome不支持。 Safari等Same goes for other -webkit个浏览器。

jsFiddle example - 适用于Chrome。

.play:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
}

除此之外，您还需要：

-moz-transform: scale(1.2)如果你想在FF 16＆lt;

中获得支持

-ms-transform: scale(1.2)如果你想在IE9中获得支持

-o-transform: scale(1.2)如果你想在Opera 12＆lt;

中获得支持

否则它将适用于所有主流浏览器。

Answer 2

您没有为悬停动画添加-webkit-前缀。

以下是JSFIDDLE

我改变了什么，

.play:hover {
   transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
}

转换不适用于chrome

2 个答案: