我一直在网上搜索并花费大量时间来获得顺畅的体验 动画。
当您使用 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 等?
问候,
克里斯。
最佳答案
所有 3D 属性在移动和桌面设备上都是硬件加速的。然而,只有 Webkit 和 Firefox(最近)支持 3D 转换属性。
关于performance - translate3d 使用 css3 动画效果更好吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9615917/