translate3dはcss3アニメーションでよりうまく動作しますか？

Question

私はスムーズにウェブを検索して時間を費やしています。 アニメーション。

translate3d プロパティを使用して、以下のような要素プロパティを設定すると、自動的にハードウェアCPUアクセラレーションがトリガーされるのは間違いですか？

.someclass { 
    /*does it trigger hardware cpu acceleration*/ 
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    -ms-transform: translate3d(0,0,0); 
    -o-transform: translate3d(0,0,0); 
} 

これを設定した後で3Dプロパティをアニメートする必要がありますか？または のCSSプロパティをアニメーション化できますか？私はその後、私はdiv要素をアニメーション化するjQueryのを使用して、別のクラスに

.connectanimation { 
    -moz-transition: all .7s ease; 
    -moz-transition: all .7s ease; 
    -ie-transition: all .7s ease; 
    -o-transition: all .7s ease; 
    transition: all .7s ease; 
} 

を持ってこれをアニメーション化する

。

jQuery('#somedivid').on('mouseover', function() { 
    jQuery(this).removeClass('connectanimation').addClass('connectanimation'); 
    jQuery(this).css("margin-top","100px"); // a normal css transition 
    //jQuery(this).css('MozTransform', 'translate3d(0px, 100px, 0px)'); // or this way? 
}); 

私はここで正しいのですか？また、最高のパフォーマンスを得るためにアニメーション化するにはどうすればよいですか？ translate3dの方法であれば、私のコードでは多くの行が余分に得られるでしょう オペラ、クロムなどのような他のブラウザをサポートしていますか？

ありがとう、

Chris。

Answer 1

すべての3Dプロパティは、モバイルデバイスとデスクトップデバイスでハードウェアアクセラレーションされています。しかし、WebkitとFirefox（非常に最近）だけが3D変換プロパティをサポートしています。