css - 过渡在 chrome 中不起作用

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

您需要-webkittransform 属性的供应商：-webkit-transform: scale(1.2)，否则 Chrome 不支持它。Safari等其他浏览器也是如此。 -webkit

jsFiddle 示例- 适用于 Chrome。

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

除此之外，您还需要：

-moz-transform: scale(1.2)如果你想在 FF 16 中获得支持<

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

-o-transform: scale(1.2)如果您想在 Opera 12 中获得支持<

否则它将在所有主要浏览器中工作。

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);
}