css - Class:hover は Firefox では機能しますが、Chrome や IE9 では機能しません

Question

ここで問題は、マウス ホバーでこのテキストを回転させたいことです。このコードは Firefox では完全に機能しますが、Chrome (バージョン 25.0.1364.97 m) や IE9 では機能しません。

http://jsfiddle.net/B2u4j/1/

<div class="holder circulate" > Hello World </div>

CSS

.holder {
border: 10px solid #FFFFFF;
float: left;
margin-left:0px;
margin-top:0px;
box-shadow: 2px 2px 5px #333333;
overflow: hidden;
transition: all 0.5s Ease;
 }

.circulate:hover {

transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-o-transform: rotate(360deg); /* Opera */
-moz-transform: rotate(360deg); /* Firefox */  
}

Answer 1

transitionクロスブラウザーのサポートを向上させるには、ベンダー プレフィックス付きのプロパティを追加する必要があります。

.holder {
    border: 10px solid #FFFFFF;
    ...
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    }

http://css3please.com/で、どのブラウザーに対してどのプロパティにプレフィックスを付ける必要があるかを最新の状態に保つことができます。

Answer 2

使用する-webkit-transition: all 0.5s Ease;