2

I have been searching and spending lot's of hours on the web to get smooth animations.

Is it correct that when you set a element properties like below using the translate3d propertie that it will automatically trigger hardware cpu acceleration?

.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);
}

And do you have to animate it's 3d property after settings this? or can you animate any css property.

To animate this i have another class

.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;
}

Then I use jQuery to animate the div element.

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?
});

Am I doint it the right way here? And what should I use to animate for best performance? If it was the translate3d way.. then I would get a lot of lines extra in my code for support for other browser like opera, chrome etc right?

Regards,

Chris.

chriscross
  • 41
  • 1
  • 4

1 Answers1

1

All 3D properties are hardware accelerated on mobile and desktop devices. However, only Webkit and Firefox (very very recently) support the 3D transform properties.