Inspect animations

Overview

Chrome DevTools Animation Inspector는 크게 두 가지 용도로 됨.

• 애니메이션 검사. 애니메이션 그룹의 속도를 늦추거나, 다시 재생하거나, 소스 코드를 검사할 수 있음.
• 애니메이션 수정. 애니메이션 그룹의 타이밍, 지연, 재생 시간 또는 키프레임 오프셋을 수정할 수 있음.

애니메이션 그룹이란?

애니메이션 그룹은 서로 연관된 것처럼 보이는 일련의 애니메이션.

시작하기

• 메인메뉴를 이용해서 애니메이션 검사 창 열기
  • More 를 클릭
  • More tools 의 서브 메뉴로 이동
  • Animations을 클릭 :
    
• 커맨드 메뉴를 열고 Show Animations 을 검색.

애니메이션 검사창은 아래의 네가지 영역으로 구분됨.

1. Controls. 캡처된 애니메이션 그룹을 모두 지우거나 현재 선택한 애니메이션 그룹의 속도를 변경할 수 있음.
2. Overview. 조사할 애니메이션 그룹을 선택하고 Details 창에서 수정.
3. Timeline. 애니메이션을 일시 중지하고 시작하거나, 애니메이션의 특정 지점으로 점프
4. Details. 현재 선택한 애니메이션 그룹을 검사하고 수정

애니메이션 검사

애니메이션을 캡처한 후에 이를 재생할 수 있는 방법.

• Overview 창에서 애니메이션의 썸네일 이미지에 마우스 오버
• Overview 창에서 애니메이션 그룹을 선택하고(Details 창에 표시되도록 함) 재생 버튼 ())을 클릭. 애니메이션 속도 버튼())으로 재생속도 조정
• 빨간색 세로 막대를 클릭하여 끌어 재생 타이밍 변경

출처 : developers.google.com/web/tools/chrome-devtools/inspect-styles/animations?hl=en