Jerky animations - JQuery/CSS3

Question

Я пытаюсь объединить jQuery и CSS3 для создания плавных анимаций, но я все еще нахожу, что анимация может быть отрывистой, даже на рабочем столе.

Я использую нижеследующее, чтобы переместить мой id со стороны страницы на страницу.

$(id).addClass('active').css({ left: pageWidth }) 
         .animate({left: 0}, 500, function(e){deferred.resolve()}) 
         .css("-webkit-transform", "translate3d(0px,0px,0px)") 
         .css("-moz-transform", "translate3d(0px,0px,0px)") 
         .css("-ms-transform", "translate3d(0px,0px,0px)") 
         .css("-o-transform", "translate3d(0px,0px,0px)") 
         .css("transform", "translate3d(0px,0px,0px)"); 

Может ли кто-нибудь дать совет, если что-нибудь еще я могу сделать?

Answer 1

Используйте плагин/расширение, например velocity, чтобы автоматически использовать анимацию CSS для вас за кулисами.

Мы недавно использовали его, чтобы избежать заикания анимации на мобильных устройствах, и это многое улучшило.

Answer 2

Если вы хотите более плавные анимации, и вы можете использовать CSS3 без ограничений, вы можете использовать ключевые кадры CSS3.

Взгляните на эту коллекцию CSS3 анимации под названием Animate.css:

http://daneden.github.io/animate.css/

Это делает использование CSS3 Keyframes, который работает очень гладко. Вы можете редактировать анимацию или создавать новые, в зависимости от того, что вы хотите усвоить. С помощью Keyframes вы можете установить состояние анимации в любом кадре, чтобы вы могли сделать ее гладкой, как вы хотите, в зависимости от того, как вы ее создаете.

Взгляните на эту статью о Keyframes, и если вы не хотите использовать те, на Animate.css попытаться изменить их или создать свой собственный:

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

Для animmation вы хотите получить код не так уж сложно. Вы можете сделать это с анимацией jQuery, но Keyframes будет работать более плавно, если вы будете работать лучше на фреймах.