translate3d работает лучше с анимацией css3? - PullRequest
Новая
       19

translate3d работает лучше с анимацией css3?

2 голосов
/ 08 марта 2012

Я искал и тратил много часов в Интернете, чтобы получить плавную анимацию.

Правильно ли, что когда вы устанавливаете свойства элемента, как показано ниже, используя свойство translate3d, оно автоматически запускает аппаратное ускорение процессора? 

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

AmЯ делаю это правильно здесь?И что я должен использовать, чтобы оживить для лучшей производительности?Если бы это был способ translate3d ... тогда я получил бы много строк в своем коде для поддержки других браузеров, таких как Opera, Chrome и т. Д. Правильно?

С уважением,

Крис.

1 Ответ

1 голос
/ 14 мая 2012

Все трехмерные свойства аппаратно ускорены на мобильных и настольных устройствах.Однако только Webkit и Firefox (совсем недавно) поддерживают свойства 3D-преобразования.

...