使用css3动画时，translate3d的性能会更好吗？
使用css3动画时，translate3d的性能会更好吗？
提问于 2012-03-08 18:12:18
为了得到流畅的动画效果，我花了很多时间在网上搜索。
当你像下面这样使用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属性。
为了让它动画化，我还有另一个类
.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对div元素进行动画处理。
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的方式..然后我会在我的代码中得到很多额外的行，以支持其他浏览器，如opera，chrome等，对吗？
致以敬意，
克里斯。
回答 1
Stack Overflow用户
发布于 2012-05-15 00:57:59
所有3D属性在移动和桌面设备上都是硬件加速的。但是，只有Webkit和Firefox (最近)支持3D变换属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9615917
复制相关文章
相似问题
腾讯云开发者
