애니메이션: CSS 애니메이션 효과 검사 및 수정

Sofia Emelianova
Sofia Emelianova

Chrome DevTools Animations 창 탭에서 애니메이션을 검사하고 수정합니다.

개요

애니메이션을 캡처하려면 애니메이션 패널을 엽니다. 그러면 자동으로 애니메이션을 감지하여 여러 그룹으로 정렬합니다.

Animations 패널의 주요 용도는 두 가지입니다.

  • 애니메이션 검사 애니메이션 그룹의 속도를 늦추거나, 다시 재생하거나, 소스 코드를 검사합니다.
  • 애니메이션을 수정합니다. 애니메이션 그룹의 타이밍, 지연, 재생 시간 또는 키프레임 오프셋을 수정합니다. 키프레임 및 베지어 수정은 지원되지 않습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

Animations 패널은 CSS 애니메이션, CSS 전환, 웹 애니메이션, View Transitions API를 지원합니다. requestAnimationFrame 애니메이션은 아직 지원되지 않습니다.

애니메이션 그룹이란 무엇인가요?

애니메이션 그룹은 서로 관련된 것처럼 보이는 애니메이션의 집합입니다.

현재 웹에는 그룹 애니메이션이라는 개념이 제대로 정립되지 않았기 때문에, 모션 디자이너와 개발자가 각각의 애니메이션을 구성하고 타이밍을 맞춰 하나의 일관된 시각적 효과를 나타냅니다. Animations 패널은 시작 시간(지연 제외)을 기반으로 관련 애니메이션을 예측하고 나란히 그룹화합니다.

즉, Animations 패널은 동일한 스크립트 블록에서 트리거된 애니메이션을 함께 그룹화하지만 비동기식인 경우 서로 다른 그룹으로 묶입니다.

애니메이션 패널 열기

다음 두 가지 방법으로 Animations 패널을 열 수 있습니다.

  • 더보기를 클릭합니다. DevTools 사용자설정 및 제어 >를 선택합니다. 도구 더보기 > 애니메이션. 메뉴의 애니메이션
  • 다음 중 하나를 눌러 명령어 메뉴를 엽니다.

    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P

    그런 다음 Show Animations를 입력하고 해당하는 창 패널을 선택합니다. 애니메이션을 표시합니다.

기본적으로 Animations 패널은 Console 창 옆에 탭으로 열립니다. 서랍 탭으로서 이 탭은 모든 패널과 함께 사용할 수 있으며 DevTools 상단으로 이동할 수도 있습니다.

비어 있는 애니메이션 패널

애니메이션 패널을 열면 진행 중인 애니메이션이 자동으로 캡처됩니다. 페이지 로드 시 애니메이션이 트리거되거나 이미 중지된 경우 패널을 연 상태에서 페이지를 새로고침합니다.

애니메이션 패널 UI 익히기

Animations 패널에는 4개의 기본 섹션이 있습니다.

애니메이션 패널의 섹션입니다.

  1. 제어. 여기에서 캡처된 애니메이션 그룹을 하거나, 캡처한 애니메이션 그룹을 일시중지하거나, 애니메이션을 또는 다시 시작하거나, 선택한 애니메이션 그룹의 속도를 변경할 수 있습니다.
  2. 개요. 캡처된 애니메이션 그룹을 아이콘으로 표시합니다. 스크롤 기반과 일반(시간 기반)의 두 가지 유형이 있습니다.

    조사할 애니메이션 그룹을 선택하고 세부정보 창에서 수정합니다.

  3. 타임라인. 애니메이션 그룹의 유형에 따라 타임라인은 다음과 같을 수 있습니다.

    • 스크롤 기반 애니메이션의 경우 픽셀 단위로 표시됩니다.
    • 시간 기반 애니메이션의 경우 밀리초 단위입니다.

    타임라인에서 애니메이션을 다시 재생하거나, 스크러빙하거나, 특정 지점으로 이동할 수 있습니다.

  4. 세부정보 선택한 애니메이션 그룹을 검사하고 수정합니다.

애니메이션을 캡처하려면 애니메이션 패널이 열려 있는 동안 애니메이션을 트리거합니다.

애니메이션 검사

애니메이션을 캡처한 후 이를 재생하는 몇 가지 방법이 있습니다.

  • 개요 창에서 미리보기 이미지 위로 마우스를 가져가면 미리보기가 표시됩니다.
  • 플레이헤드 (빨간색 세로 막대)를 드래그하여 표시 영역 애니메이션을 스크러빙하거나 타임라인의 아무 곳이나 클릭하여 플레이헤드를 특정 지점으로 설정합니다. 이미 재생 중이면 애니메이션은 계속 재생되고 그렇지 않으면 중지됩니다.
  • Overview 창에서 애니메이션 그룹을 선택하고(Details 창에 표시되도록 함) 다시 재생 버튼 Replay 버튼을 누릅니다. 이 애니메이션이 다시 재생됩니다.

컨트롤 막대에서 애니메이션 속도 버튼 애니메이션 속도 버튼을 클릭하여 선택한 애니메이션 그룹의 미리보기 속도를 변경합니다.

애니메이션 세부정보 보기

애니메이션 그룹을 캡처한 후 Overview 창에서 클릭하여 세부정보를 확인합니다.

세부정보 창에서 각 애니메이션에는 고유 행이 표시됩니다. 해당하는 요소의 전체 이름을 보려면 이름 열의 크기를 조정하세요.

세부정보 창

애니메이션 위로 마우스를 가져가면 뷰포트에서 강조표시됩니다. 애니메이션을 클릭하여 요소 패널에서 선택합니다.

애니메이션 위로 마우스를 가져가서 표시 영역에서 강조표시

일부 애니메이션은 animation-iteration-count 속성이 infinite로 설정된 경우 무기한 반복됩니다. Animations 패널에는 정의와 반복이 표시됩니다.

애니메이션 반복

가장 왼쪽에 있는, 애니메이션에서 어둡게 표시되는 부분은 해당 항목의 정의입니다. 오른쪽에 있는 색이 바랜 부분도 반복을 나타냅니다.

예를 들어 다음 스크린샷에서 두 번째와 세 번째 섹션은 첫 번째 섹션의 반복을 나타냅니다.

애니메이션 반복의 다이어그램

두 요소에 동일한 애니메이션이 적용된 경우 Animations 패널에서는 같은 색으로 표시됩니다. 색상 자체는 무작위이며 의미가 없습니다. 예를 들어 아래 스크린샷에서 두 요소 div.eye.left::afterdiv.eye.right::after에는 div.feet::beforediv.feet::after 요소와 마찬가지로 동일한 애니메이션(eyes)이 적용되어 있습니다.

색상이 구분된 애니메이션

애니메이션 수정

애니메이션 패널을 사용하여 애니메이션을 수정하는 방법에는 세 가지가 있습니다.

  • 애니메이션 지속 시간.
  • 키프레임 타이밍
  • 시작 시간 지연
를 통해 개인정보처리방침을 정의할 수 있습니다.

이 섹션에서는 다음 스크린샷이 원본 애니메이션을 나타낸다고 가정합니다.

수정 전의 원본 애니메이션입니다.

애니메이션의 재생 시간을 변경하려면 첫 번째 또는 마지막 원을 드래그합니다.

수정된 기간.

애니메이션에서 키프레임 규칙을 정의한 경우, 안쪽에 흰색 원으로 표시됩니다. 이들 중 하나를 드래그하여 키프레임의 타이밍을 변경합니다.

키프레임이 수정되었습니다.

애니메이션에 지연을 추가하려면 원이 아닌 애니메이션 자체를 클릭한 다음 원하는 위치로 드래그합니다.

지연을 수정했습니다.

@keyframes 실시간 수정

스타일에서 @keyframes를 수정하면 애니메이션 패널에서 즉시 효과를 확인할 수 있습니다.

데모 페이지에서 사용해 보세요.

  1. Animations 패널을 엽니다. 그러면 페이지에서 진행 중인 깜빡이는 애니메이션이 자동으로 캡처됩니다. 작업 표시줄의 컨트롤에서 애니메이션을 선택합니다.
  2. 요소에서 class="pulser"를 사용하여 요소를 검사하고 스타일에서 @keyframes pulse 섹션을 찾습니다.
  3. 예를 들어 키프레임을 수정하여 두 번째 키프레임을 50%에서 20%로 변경해 보세요.
  4. 스타일의 변경사항이 애니메이션 패널에서 캡처한 애니메이션에 어떤 영향을 미치는지 확인합니다.

애니메이션 중에 ::view-transition 유사 요소 수정

View Transitions API를 사용하면 한 번에 DOM을 변경하면서 두 상태 간에 애니메이션 전환을 만들 수 있습니다. 애니메이션 중에 API는 다음과 같은 구조로 가상 요소 트리를 만듭니다.

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

요소 > 스타일에서 이 구조를 수정하려면 다음 단계를 따르세요.

  1. DevTools를 열고 View Transitions API를 사용한 페이지를 검사합니다. 예를 들어 이 데모 페이지를 참고하세요.
  2. 애니메이션에서 일시중지를 클릭합니다.
  3. 페이지에서 애니메이션을 트리거합니다. 애니메이션 패널이 이를 캡처하고 즉시 일시중지합니다. 이제 DOM에서 <head> 요소 위에 ::view-transition 구조를 확인할 수 있습니다.

    ::view-transition 가상 요소의 CSS를 수정합니다.

  4. 요소 > 스타일에서 ::view-transition 가상 요소의 CSS를 수정합니다.

  5. 애니메이션을 재개하고 재생하여 결과를 확인합니다.

자세한 내용은 View Transitions API를 사용한 원활하고 간단한 전환을 참고하세요.