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属性。

为此动画我还有另一个课程

.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等其他浏览器的支持对吗？

此致

克里斯。

Answer 1

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

translate3d在css3动画中表现更好吗？

1 个答案: