2

我一直在网上搜索并花费大量时间来获得流畅的动画。

当您使用 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 等，对吗？

问候，

克里斯。

4

1 回答 1

1

所有 3D 属性都在移动和桌面设备上进行了硬件加速。但是，只有 Webkit 和 Firefox（最近）支持 3D 变换属性。

于 2012-05-14T16:57:58.540 回答