Rachel Andrew
이 게시물에서 CodePen에서 인기 있는 애니메이션이 어떻게 만들어졌는지 알아보세요. 이러한 애니메이션은 모두 이 섹션의 다른 도움말에서 설명한 성능이 우수한 기법을 사용합니다.
이러한 권장사항의 이론적 배경을 알아보려면 일부 애니메이션이 느린 이유는 무엇인가요?를 참고하고, 실용적인 팁을 알아보려면 애니메이션 가이드를 참고하세요.
마법사 로드 애니메이션
이 로드 애니메이션은 CSS로만 빌드되었습니다. 이미지와 모든 애니메이션은 CSS와 HTML로 만들어졌으며 이미지나 JavaScript는 없습니다. Chrome DevTools를 사용하면 웹페이지가 어떻게 만들어졌는지, 얼마나 잘 작동하는지 알 수 있습니다.
Chrome DevTools로 애니메이션 검사하기
애니메이션이 실행되는 상태에서 Chrome DevTools의 Performance 탭을 열고 애니메이션을 몇 초 동안 녹화합니다. 이 애니메이션을 실행할 때 브라우저가 레이아웃 또는 페인트 작업을 실행하지 않는다는 것을 요약에서 확인할 수 있습니다.