CSS 박스 그림자를 애니메이션하고 성능을 최적화하는 방법
- Joseph Gordon-Levitt원래의
- 2025-02-11 08:24:10930검색
이 기사에서는 브라우저 성능을 줄이지 않고 CSS 박스 그림자를 애니메이션하는 방법을 배웁니다.
CSS에서 Box-Shadow 속성은 웹 요소에 그림자를 추가하는 데 사용되며 이러한 그림자는 애니메이션 할 수 있습니다. 그러나 섀도우 애니메이션은 브라우저의 성능에 영향을 줄 수있어 페이지를 렌더링 할 때 지연됩니다.
CSS 박스 그림자 애니메이션은 브라우저 성능에 영향을 줄 수 있으므로 페이지 렌더링 중에 지연 될 수 있습니다. 따라서 빠른 페이지로드 시간을 유지하기 위해 이러한 애니메이션을 최적화하는 것이 중요합니다. 이는 사용자 만족도 및 전환율의 핵심 요소입니다.
왜 이것이 중요한지
펜
를 참조하십시오 sitepoint (@sitepoint) 에 의한 그림자 애니메이션이있는 웹 요소 Codepen에서.
-
레이아웃. 일부 애니메이션은 페이지의 구조를 변경하여 많은 스타일의 재 계산으로 이어질 수 있습니다. 좋은 예는 확장 할 때 다른 요소를 밀어내는 사이드 바입니다. 이를 유발하는 CSS 속성에는 패딩, 여백, 테두리가 포함됩니다.간단히 말하면, 애니메이션 속성이 다른 요소에 영향을 미치면 페이지의 레이아웃이 변경되어 다시 계산이 변경됩니다. 이는 많은 시스템 리소스를 사용합니다. -
<.> 복합. 합성에서는 페이지의 일부만 변경됩니다. 불투명도 및 변환과 같은 CSS 속성은 적용되는 요소에만 영향을 미칩니다. 이는 스타일 재 계산이 적고 더 부드러운 애니메이션을 의미합니다. 합성은 세 가지 중에서 가장 적은 작업 프로세스입니다.
브라우저의 검사관 도구를 사용하면이 프로세스를 실시간으로 관찰 할 수 있습니다. 먼저, 검사관 도구를 열고 (Chrome은 아래 그림) 탭의 오른쪽 상단에있는 3 개의 점을 클릭하십시오. 더 많은 도구를 확인하고 렌더링을 선택하십시오
이 예에서는 페인트 깜박임이 선택됩니다. 페인팅 이벤트가있을 때마다 화면이 녹색으로 플래시됩니다 : -
<:> 텍스트 카드 :NAVBAR : -
상자를 켜고 끄는 데 약 2 초가 걸립니다. 이제 이것을 두 번째 그림자 애니메이션과 비교하십시오 -
다시, 2 초 켜지고 꺼지고 모든 이벤트에 대한 시간이 눈에 띄게 증가합니다. 그림은 전 96ms였으며 이제는 187ms로 두 배가되었습니다. 합성의 일부인 렌더링도 97ms에서 178ms입니다. 따라서 그림자의 불투명도 만 변경하면보다 성능이 좋은 애니메이션이 생성됩니다. - 펜 를 참조하십시오 itepoint (@sitepoint) 에 의한 애니메이션 불투명도 대 애니메이션 오프셋 Codepen에서.
무대 뒤에서 일어나는 일 때문에 CSS Box-Shadow 애니메이션은 리소스가 많을 수 있습니다. Box Shadow 애니메이션 (또는 그 문제에 대한 모든 형태의 애니메이션) 중에 트리거되는 세 가지 주요 프로세스 또는 이벤트가 있습니다. 이 이벤트는 페인팅, 레이아웃 및 합성입니다
그림. 그림에서 브라우저는 픽셀을 색상으로 채우고 Box-Shadow는이 이벤트를 트리거하는 CSS 속성 중 하나입니다. 기본적으로 애니메이션의 모든 프레임에 새 그림자를 만듭니다. Mozilla에 따르면 이상적인 CSS 애니메이션은 60fps로 실행됩니다.
html로 시작하여 간단한 박스 샤 두어 애니메이션을 만들어 봅시다 :
펜
<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>; </span>를 참조하십시오 sitepoint (@sitepoint) 에 의한 애니메이션 박스 쉐이드 Codepen에서.
<span><span><span><body</span>></span> </span> <span><span><span><div</span> class<span>="box"</span>></span><span><span></div</span>></span> </span><span><span><span></body</span>></span> </span>
<span><span>.box</span> {
</span> <span>box-shadow: 0px 5px 10px 0px <span>rgba(0, 0, 0, 0.5)</span>;
</span> <span>transition: transform ease 0.5s, box-shadow ease 0.5s;
</span><span>}
</span><span><span>.box:hover</span> {
</span> <span>transform: translateY(-5px);
</span> <span>box-shadow: 0px 10px 20px 2px <span>rgba(0, 0, 0, 0.25)</span>;
</span><span>}
</span>
웹 페이지에서 그림자를 애니메이션해야한다면 더 성능을 발휘할 가치가 있습니다. 이 섹션에서는 그림자 애니메이션을 조정하여 성능이 줄어드는 다양한 방법을 배울 수 있습니다.
우리는 다음을 다룰 것입니다 :
유사 요소를 애니메이션하는
변환 속성 사용
층 그림자
테이블 주위의 그림자를 관찰하거나 그 위의 물체를 들어 올리면 가장 어두운 그림자 영역이 물체에 가장 가까워지고 바깥쪽으로 퍼져서 점점 더 가벼워집니다.
.
이 애니메이션은 148ms의 렌더링과 133ms의 그림을 가지고 있습니다.
<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>; </span>
펜
이제, 애니메이션 중에 두 번째 그림자를 추가하여 다른 것을 시도해 봅시다 :
유사 요소를 애니메이션하는
변환 속성 사용 결론
CSS Box-Shadow에 대한 FAQS
Box-Shadow를 사용하여 여러 그림자를 요소에 적용 할 수 있습니까? 예, 각 그림자를 쉼표로 분리하여 여러 개의 그림자를 적용 할 수 있습니다.
<span>box-shadow: <x-offset> <y-offset> <spread> <blur> <color>;
</span>
펜
에는 230ms의 렌더링 시간이 있고 그림에는 211ms가 있습니다. 이제 의사 섀도우 애니메이션.
책 : CSS Mas
CSS의 CSS의 방법 : IS, WHER 및 : 의사 클래스 선택기가 작동합니까
색상 : 그림자의 색상.
HTML 요소에서 Box-Shadow를 사용할 수 있습니까?
위 내용은 CSS 박스 그림자를 애니메이션하고 성능을 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!