Animation Inspector는 웹 페이지에서 실행 중인 모든 CSS 애니메이션과 트랜지션을 완벽하게 제어할 수 있게 해줍니다. 한 번에 모든 애니메이션을 일시 정지하거나, 프레임 단위로 느리게 재생하여 검사하거나, 속도를 높여 성능을 테스트하거나, 타임라인을 직접 스크러빙할 수 있습니다. 브라우저 DevTools를 열지 않고도 하나의 플로팅 패널에서 모든 작업이 가능합니다.
CSS 애니메이션은 디버깅하기 매우 어렵습니다. 빠르게 진행되고, 서로 겹치며, 브라우저 DevTools에서는 computed styles를 일일이 찾아야 합니다. Animation Inspector는 페이지의 모든 @keyframes 애니메이션과 CSS 트랜지션을 자동으로 감지하여, 전체 설정(지속 시간, easing, delay, 반복 횟수)과 함께 나열하고, 전체 또는 개별 애니메이션에 대한 재생 컨트롤을 제공합니다. 지터가 발생하는 호버 효과를 디버깅하거나, 페이지 진입 애니메이션의 타이밍을 미세 조정하거나, 복잡한 애니메이션 라이브러리의 내부 동작을 이해할 때 이 도구가 큰 도움이 됩니다.
페이지의 모든 애니메이션을 한 번의 클릭으로 즉시 정지시킬 수 있습니다. 애니메이션은 시작 지점으로 리셋되지 않고 현재 위치에서 멈춥니다. 다시 재생하면 정확히 멈춘 지점부터 이어집니다. 육안으로는 절대 잡을 수 없는 중간 애니메이션 상태를 검사할 때 필수적입니다.
모든 애니메이션의 재생 속도를 동시에 조정할 수 있습니다. 0.25x(4분의 1 속도), 0.5x, 1x(정상), 2x, 4x 중에서 선택하세요. 0.25x로 설정하면 가장 빠른 200ms 트랜지션도 쉽게 관찰하고 디버그할 수 있습니다.
페이지에 있는 모든 CSS 애니메이션과 트랜지션이 자동으로 감지되어 스크롤 가능한 목록으로 표시됩니다. 각 항목에는 애니메이션 이름(또는 트랜지션 속성), 지속 시간, 타이밍 함수(ease, linear, cubic-bezier), 딜레이, 반복 횟수, 현재 실행 상태가 표시됩니다.
타임라인 스크러버를 드래그하여 애니메이션을 프레임 단위로 수동으로 이동할 수 있습니다. 애니메이션 주기의 25%, 50%, 또는 원하는 지점에서 정확히 어떤 일이 일어나는지 확인하세요. 드래그하는 동안 페이지가 실시간으로 업데이트됩니다.
각 애니메이션을 독립적으로 일시 정지, 재생, 또는 속도 조정할 수 있습니다. 다른 움직이는 요소에 방해받지 않고 하나의 애니메이션만 격리하여 디버그할 수 있습니다.
목록에서 아무 애니메이션이나 클릭하면 전체 CSS 선언을 볼 수 있습니다. @keyframes 정의, animation shorthand 분해, 계산된 시작/종료 상태, 적용된 요소 등이 표시됩니다.
애니메이션 검사기 covers the following, organized by category:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-statetransition-propertytransition-durationtransition-timing-functiontransition-delayeaseease-inease-outease-in-outlinearcubic-bezier()steps()transformtransform-origintranslaterotatescaleskew애니메이션을 0.25x로 느리게 하여 스터터나 지터가 정확히 어디에서 발생하는지 확인하세요. 레이아웃 스래싱(width/height 대신 transform 사용 여부), 잘못된 easing, 또는 동일 요소의 충돌하는 애니메이션이 원인인지 파악할 수 있습니다.
타임라인 스크러빙을 사용해 cubic-bezier easing 곡선이 실제로 어떻게 보이는지 확인하세요. 특정 퍼센트 지점에서 ease-in과 ease-out 동작을 비교하고, 값을 조정하며 재생하여 자연스러운 움직임을 만들 수 있습니다.
인상적인 애니메이션이 있는 웹사이트(랜딩 페이지, 포트폴리오 사이트)를 방문해 정확히 어떻게 구현되었는지 검사하세요. @keyframes 정의, 타이밍 값, 요소 타겟팅 등을 확인할 수 있습니다.
호버 효과, 로딩 스피너, 스켈레톤 스크린, 페이지 트랜지션이 모두 올바르게 작동하는지 확인하세요. 중간 상태에서 일시 정지하여 요소 겹침, 애니메이션 중 잘못된 z-index, 콘텐츠 리플로우 같은 시각적 글리치를 검사할 수 있습니다.
전정장애가 있는 사용자에게 문제를 일으킬 수 있는 애니메이션을 식별하세요. 모든 애니메이션을 일시 정지한 후 페이지가 완전히 기능하는지 확인하여 prefers-reduced-motion이 제대로 적용되었는지 검토할 수 있습니다.
DevSuite Pro 플로팅 독을 열고 Animation Inspector 아이콘을 클릭하세요. 도구가 즉시 페이지를 스캔하여 실행 중인 모든 CSS 애니메이션과 트랜지션을 감지합니다.
플로팅 패널에 페이지에서 발견된 모든 애니메이션이 목록으로 표시됩니다. 각 항목에는 애니메이션 이름, 지속 시간, easing 함수, 현재 실행/일시정지 상태가 표시되며, 배지에는 총 감지된 애니메이션 수가 나타납니다.
전체 일시 정지 버튼을 클릭하면 모든 애니메이션이 동시에 정지됩니다. 요소들은 현재 중간 상태를 유지하므로 CSS 속성을 검사하거나 스크린샷을 찍거나 위치를 비교할 수 있습니다.
속도 선택기를 사용하여 애니메이션을 0.25x로 느리게 하여 세부 관찰하거나, 4x로 빠르게 재생할 수 있습니다. 속도 변경은 즉시 적용되며 애니메이션을 처음부터 다시 시작하지 않습니다.
타임라인 스크러버를 좌우로 드래그하여 애니메이션을 수동으로 프레임 단위로 이동하세요. 페이지가 실시간으로 업데이트되어 각 프레임의 모습을 정확히 보여줍니다. 글리치 발견이나 easing 곡선 확인에 완벽합니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.