CSS3 애니메이션과 jquery 애니메이션의 차이점은 무엇입니까

css3 애니메이션과 jquery 애니메이션의 차이점: 1. css3는 3d 애니메이션을 설정할 수 있지만 jquery는 3d 애니메이션을 구현할 수 없습니다. 2. css의 2d 매트릭스 애니메이션은 더 효율적이고 다른 속성 애니메이션은 왼쪽 여백을 사용합니다. Matrix 애니메이션을 시뮬레이션하기 위한 top은 비효율적이지만 다른 속성 애니메이션은 효율적입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&jquery3.2.1 버전, Dell G3 컴퓨터.

css3 애니메이션과 jquery 애니메이션의 차이점은 무엇입니까?

css3 애니메이션과 jquery 애니메이션의 장점과 단점 비교:

CSS3 애니메이션은 2D, 3D 및 기존 애니메이션 속성 인터페이스를 제공하며 이는 애니메이션의 모든 요소에서 작동합니다. page 특성상 CSS3 애니메이션은 C언어로 작성되어 있기 때문에 확실히 js로 시뮬레이션한 애니메이션보다 효율성이 높습니다.

테스트 결과 CSS3 애니메이션과 자바스크립트 시뮬레이션 애니메이션에는 다음과 같은 차이점이 있는 것으로 나타났습니다.

1. CSS 3D 애니메이션은 js에서 구현할 수 없습니다.

CSS3의 3D 애니메이션은 작동하기 때문에 CSS3에서 매우 강력한 기능입니다. 원칙은 3차원 공간에 있으므로 js는 CSS3와 같은 3D 애니메이션을 시뮬레이션할 수 없습니다. 물론 이 3D 애니메이션이 다양한 실제 응용 시나리오를 가지고 있는지 생각해 볼 가치가 있습니다...

2. js는 행렬 애니메이션을 시뮬레이션하기 위해 여백과 왼쪽, 상단을 사용하는 것보다 더 효율적입니다.

CSS3의 2D 애니메이션은 2D 행렬 변환 변경(예: 스케일링\변형\x축\y축)을 나타냅니다. 변신 애니메이션. 좌표 애니메이션을 예로 들어보겠습니다. 테스트 후 CSS3 변환을 사용하여 TranslateXY 애니메이션을 만드는 것이 js의 position

및 position right보다 거의 700mm 더 빠르다는 사실을 발견했습니다. 또한 시각적으로도 훨씬 더 부드럽습니다.

CSS3의 다른 일반 애니메이션 속성의 효율성은 js 시뮬레이션 애니메이션의 효율성보다 낮습니다.

여기서 일반 애니메이션 속성은 높이, 너비, 불투명도, 테두리 너비, 색상을 나타냅니다.

우리는 Android HTC에서 작업한 테스트에서는 DOM 요소를 높이:0에서 높이:100으로 변경했습니다. jQuery

animate와 CSS3 전환 및 애니메이션을 사용했는데 결과에 따르면 CSS3 탄화 및 애니메이션이 jQuery

animate보다 500mm 느렸습니다. ! 다른 일반 애니메이션 속성은 jQuery animate!보다 400-500mm 느립니다.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS3 애니메이션과 jquery 애니메이션의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!