여러 div에 애니메이션을 적용하는 최적의 방법

Question

여러 화면에 애니메이션을 적용하는 가장 좋은 방법을 찾고 있습니다. jQuery를 시도했지만 화면에> 5 개 요소가 있으면 건너 뛸 수있었습니다. Raphael.js도 똑같은 문제를 일으켰습니다. 그래서 한 번에 5-6 개 div를 애니메이션으로 만드는 가장 좋은 방법은 무엇입니까? 그들은 단지 화면을 가로 질러 수평으로 움직이고 있습니다.

CSS3의 translate2d가 좋을까요? translate3d를 대신 사용하여 성능을 심각하게 최적화 할 수있는 곳을 기억합니다. 그건 내 사건에 적용 할 수 있니?

Answer 1

대상 브라우저에서 CSS3을 지원하는 경우 translate2d을 사용하면 더 부드러운 애니메이션을 만들 수 있습니다. 당신이 함께 모든 항목을 애니메이션을해야 할 경우 그냥 클래스를 만들 수 있습니다 (애니메이션 규칙, 즉 그들의 각 하나에 대해 동일합니다) 당신의 자바 스크립트 코드에

.animTarget{animation:translate3d(100, 0, 0)} 

그리고는 말 :

$("animation-target-selector").addClass('animTarget') 

나는이 같은 일을 애니메이션하는 것은 같은 것보다 쉽다는 것을 발견했다 : 그것은 각각의 style 속성과 모든 DOM 요소에 추가하기 때문에

$("animation-target-selector").css('animation', 'translate3d(100, 100, 0)'); 

합니다.