CSS에서 애니메이션이 멈추는 문제를 해결하는 방법

CSS3 애니메이션 문제 해결 솔루션 요약

1. 애니메이션에 변환을 사용하고 높이, 너비, 여백, 패딩 등을 사용하지 마세요.

이유는 다음과 같습니다.
정의에 따르면 CSS의 변환 속성입니다. 요소 또는 그 주변 요소의 레이아웃 은 변경되지 않습니다. 변형 속성은 요소의 전체 에 영향을 미치며 전체 요소의 크기 조정, 회전 및 이동 을 수행합니다.

이것은 브라우저를 위한 좋은 소식입니다! 브라우저는 이 요소의

비트맵을 한 번만 생성하고 애니메이션이 시작될 때 처리를 위해 GPU에 제출하면 됩니다. 그 후에는 브라우저에서 레이아웃, 그리기 및 비트맵 제출 작업을 수행할 필요가 없습니다. 결과적으로 브라우저는 GPU의 기능을 최대한 활용하여 다양한 위치에 비트맵을 빠르게 그리고 회전 또는 크기 조정을 수행할 수 있습니다.

너무 느린 이유: 애니메이션의 모든 프레임에서 브라우저는 레이아웃, 그리기 및
GPU에 새 비트맵 제출을 수행해야 합니다. 우리는 GPU 메모리에 비트맵을 로드하는 작업이 상대적으로 느린 작업이라는 것을 알고 있습니다.

브라우저가 많은 작업을 수행해야 하는 이유는

요소의 내용이 매 프레임마다 끊임없이 변경되기 때문입니다. 요소의 높이를 변경하면 하위 요소의 크기를 동기적으로 변경해야 할 수 있으므로 브라우저는 레이아웃을 다시 계산해야 합니다. 레이아웃이 완료된 후 기본 스레드는 요소의 비트맵을 다시 생성해야 합니다.

2. 요구 사항이 높으면 브라우저를 열어

GPU 하드웨어 가속을 활성화할 수 있습니다.

예:

1. 이제 Chrome, FireFox, Safari, IE9+ 및 최신 버전의 Opera는 모두 페이지의 DOM 요소가
특정 CSS 규칙을 적용하는 것을 감지하면 활성화됩니다. 가장 눈에 띄는 특징은 요소의 3D 변환입니다.

.cube {   
    -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);}

2. 그런데 어떤 경우에는 요소에 3D 변형 효과를 적용할 필요가 없는 경우가 있는데 어떻게 해야 할까요? 이때 약간의 트릭을 사용하여 브라우저를 "

cheat"하여 하드웨어 가속을 활성화할 수 있습니다.

요소에 3D 변환을 적용하고 싶지 않더라도

3D 엔진을 켤 수 있습니다. 예를 들어, 하드웨어 가속을 활성화하려면 변환: 변환Z(0)을 사용할 수 있습니다.

.cube {   
-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
-ms-transform: translateZ(0);   
-o-transform: translateZ(0);   
transform: translateZ(0);   /* Other transform properties here */}

Chrome 및 Safari에서 CSS 변환이나 애니메이션을 사용할 때 페이지가 깜박일 수 있습니다. 다음 코드는 이 상황을 해결할 수 있습니다.

.cube {   
-webkit-backface-visibility: hidden;   
-moz-backface-visibility: hidden;   
-ms-backface-visibility: hidden;  
backface-visibility: hidden;   
-webkit-perspective: 1000;   
-moz-perspective: 1000;   
-ms-perspective: 1000;   
perspective: 1000;   /* Other transform properties here */}

위 내용은 CSS에서 애니메이션이 멈추는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!