애니메이션 및 전환 디버거

크롬 DevTools → 추가 도구 → 애니메이션(또는 Cmd+Shift+P → "애니메이션")을 선택합니다. 패널은 CSS 전환과 애니메이션이 실행되는 동안 이를 기록하고, 위치 이동과 재생 속도 제어 기능이 있는 타임라인에 표시합니다.

애니메이션 패널에서는 재생 속도를 10%, 25%, 100%로 설정할 수 있습니다. 10%로 느리게 재생하면 정상 속도에서는 보이지 않는 타이밍 문제, 완화 곡선 문제와 끊김을 확인할 수 있어 복잡한 다중 항목 연출을 디버깅하는 데 필수적입니다.

기록된 각 애니메이션은 항목 이름, 지속 시간 막대, 지연 오프셋과 반복 횟수가 있는 행으로 표시됩니다. 키프레임 마름모는 타이밍 함수의 변경을 나타냅니다. 행 위에 마우스를 올리면 뷰포트에서 해당 항목이 강조 표시됩니다.

애니메이션 패널에서 재생 헤드를 애니메이션 타임라인의 원하는 위치로 끌어 이동하십시오. 페이지가 해당 프레임을 정확하게 렌더링하므로, 어느 순간이든 애니메이션을 멈추고 계산됨 패널에서 항목의 위치, 불투명도와 변환 값을 동시에 검사할 수 있습니다.

애니메이션 행을 클릭해 펼치십시오. 타임라인에 개별 키프레임이 마름모로 표시됩니다. 키프레임 마름모를 클릭하면 스타일 패널의 해당 @keyframes 규칙으로 이동하며, 실시간 미리 보기로 수정할 수 있습니다.

크롬 DevTools는 각 애니메이션 구간의 3차 베지어 곡선을 표시합니다. 스타일 패널에서 타이밍 함수 옆의 곡선 아이콘을 클릭하면 3차 베지어 편집기가 열립니다. 제어점을 끌어 이동하면서 애니메이션이 실시간으로 업데이트되는 모습을 확인할 수 있습니다.

CSS 전환은 실행되면 애니메이션 패널에 기록됩니다. 마우스 오버나 클래스 전환을 실행하면 패널이 전환을 캡처합니다. 지속 시간, 지연 시간과 타이밍 함수를 검사하면 전환이 이상하게 느껴지지만 원인을 알 수 없을 때 유용합니다.

레이어 테두리 표시를 켜면(DevTools → 렌더링), 자체 GPU 레이어에 있는 애니메이션 항목에 녹색 테두리가 표시됩니다. 합성되지 않은 애니메이션(너비, 위쪽 위치, 색상 애니메이션)은 레이어 테두리가 표시되지 않으며 페인트 깜박임을 일으킬 수 있습니다. 페인트 깜박임을 켜면 이를 확인할 수 있습니다.

애니메이션이 실행되는 동안 성능 프로필을 기록하십시오. 불꽃 차트에서 애니메이션 프레임과 연관된 긴 페인트 또는 레이아웃 이벤트를 찾으십시오. 합성기 전용 애니메이션(변환/불투명도)은 합성 레이어 이벤트로만 표시되므로 빠르고 페인트 작업이 발생하지 않습니다.

rAF를 사용하는 JS 애니메이션은 성능 패널의 프레임 섹션에 표시됩니다. 16ms를 초과하는 긴 rAF 콜백은 프레임 손실을 일으킵니다. 콜백을 프로파일링해 비용이 큰 계산을 찾고, 가능하다면 웹 워커를 사용해 메인 스레드 밖으로 옮기십시오.

Web Animations API(element.animate())와 WAAPI 기반 라이브러리는 CSS 애니메이션과 함께 애니메이션 패널에 표시됩니다. 패널은 애니메이션의 출처가 CSS인지 WAAPI인지 구분할 수 없지만, 재생 위치 이동과 느린 재생 제어 기능은 둘 다 지원합니다.

애니메이션 패널의 재생 헤드를 이동하면 무엇을 할 수 있습니까?

DevTools 애니메이션 패널은 위치를 이동할 수 있는 타임라인, 다양한 재생 속도, 키프레임 검사와 3차 베지어 편집 기능을 사용해 CSS 전환과 애니메이션을 기록합니다. 성능 프로파일링 및 레이어 시각화와 함께 사용하면 CSS 애니메이션의 정확성과 성능을 모두 디버깅할 수 있는 종합적인 도구를 제공합니다.