css - クロムでトランジションが機能しない

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 などの他の -webkitブラウザも同様です。

jsFiddle の例- Chrome で動作します。

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

それとは別に、次のものが必要です。

-moz-transform: scale(1.2)FF16でサポートが必要な場合<

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