이 페이지는 Cloud Translation API를 통해 번역되었습니다.

고성능 CSS 애니메이션을 만드는 방법

Kayce Basques

Rachel Andrew

이 가이드에서는 고성능 CSS 애니메이션을 만드는 방법을 설명합니다.

자세한 내용은 일부 애니메이션이 느린 이유는 무엇인가요?를 참고하세요. 이론의 근거를 제시합니다.

브라우저 호환성

이 가이드에서 권장하는 모든 CSS 속성은 교차 브라우저 기능이 도움이 될 수 있습니다

transform

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

opacity

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

will-change

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

요소 이동

요소를 이동하려면 translate 또는 rotation 키워드 값을 transform 속성.

예를 들어 항목을 뷰로 슬라이드하려면 translate를 사용합니다.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

rotate를 사용하여 요소를 회전합니다. 다음 예에서는 요소를 회전합니다. 360도

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

요소 크기 조절

요소의 크기를 조절하려면 scale 키워드 값을 사용합니다. transform 속성

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

요소의 공개 상태 변경

요소를 표시하거나 숨기려면 opacity를 사용합니다.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

레이아웃 또는 페인트를 트리거하는 속성 피하기

애니메이션에 CSS 속성을 사용하기 전에 (transform 및 opacity 제외) 속성이 렌더링 파이프라인에 미치는 영향을 결정합니다. 꼭 필요한 경우가 아니면 레이아웃이나 페인트를 트리거하는 속성은 사용하지 마세요.

레이어 강제 생성

일부 애니메이션이 느린 이유는 무엇인가요?에 설명된 대로 새 레이어에 요소를 배치하면 브라우저에서 요소를 다시 페인트할 필요 없이 나머지 레이아웃을 다시 페인트할 수 있습니다.

브라우저는 일반적으로 페이지에 어떤 항목을 배치해야 하는지에 대해 새 레이어를 사용할 수 있지만 PCollection을 사용하여 will-change 속성 이름에서 알 수 있듯이 이 속성은 브라우저에 이 요소가 어떤 식으로든 변경될 수 있습니다.

CSS에서는 will-change를 모든 선택기에 적용할 수 있습니다.

body > .sidebar {
  will-change: transform;
}

하지만 사양은 항상 실행되려고 하는 요소에 대해서만 이를 있습니다. 예를 들어, 이는 사용자가 슬라이드인할 수 있는 사이드바에 대해 true일 수 있고 있습니다. 자주 변경되지 않는 요소의 경우 will-change: 변경사항이 발생할 가능성이 있을 때 JavaScript를 사용합니다. 반드시 필요한 최적화를 수행할 수 있도록 브라우저에 충분한 시간을 주고 속성이 더 이상 사용되지 않는 경우입니다.

will-change를 지원하지 않는 브라우저에서 레이어를 강제로 생성하는 경우 (Internet Explorer 대부분의 경우) transform: translateZ(0)를 설정할 수 있습니다.

느리거나 결함이 있는 애니메이션 디버그

Chrome DevTools 및 Firefox DevTools는 애니메이션이 느리거나 결함이 있는 이유를 확인하세요.

애니메이션이 레이아웃을 트리거하는지 확인

transform 이외의 것을 사용하여 요소를 이동하는 애니메이션은 속도가 느릴 수 있습니다 다음 예에서는 transform를 사용하여 애니메이션을 비교합니다. top 및 left를 사용하여 애니메이션에 추가합니다.

금지사항

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

권장사항

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

다음 두 가지 결함 예시에서 이를 테스트할 수 있습니다. DevTools를 사용해 성능을 살펴볼 수 있습니다.

이전.
이후.

Chrome DevTools

Performance(성능) 패널을 엽니다.
런타임 성능 기록 '손실'을 선택할 수 있습니다
요약 탭을 살펴봅니다.

요약 탭에서 렌더링 값이 0이 아닌 경우 브라우저가 레이아웃을 작동하게 만드는 애니메이션입니다.

Summary 패널에는 렌더링에 37ms, 페인팅에 79ms가 표시됩니다. — </ph> animation-with-top-left 예시가 렌더링 작업을 발생시킵니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

Summary 패널에는 렌더링과 페인팅의 값이 0으로 표시됩니다. — </ph> Animation-with-transform 렌더링 작업을 발생시키지 않습니다.

Firefox DevTools

Firefox DevTools에서 Waterfall을 브라우저가 어디서 시간을 보내는지 이해하는 데 도움이 됩니다.

Performance(성능) 패널을 엽니다.
애니메이션이 진행되는 동안 성능 기록을 시작합니다.
녹화를 중지하고 Waterfall 탭을 검사합니다.

스타일 다시 계산 항목이 표시되면 즉 브라우저가 렌더링 폭포식 구조 애니메이션을 렌더링합니다.

드롭된 프레임 확인

Chrome DevTools에서 렌더링 탭을 엽니다.
FPS 미터 체크박스를 사용 설정합니다.
애니메이션이 실행되는 동안 값을 확인하세요.

FPS 측정기 UI 상단의 프레임 라벨에 주의합니다. 50% 1 (938 m) dropped of 1878와 같은 값이 표시됩니다. 고성능 99%와 같이 애니메이션의 비율이 높기 때문에 애니메이션이 매끄럽게 표시됩니다.

fps 측정기에 프레임의 50% 가 삭제된 것으로 표시됨 — </ph> animation-with-top-left 예: 프레임의 50% 가 드롭됨

fps 측정기에 삭제된 프레임은 1% 에 불과하다고 표시됩니다. — </ph> Animation-with-transform 예의 경우 프레임의 1% 만 삭제됩니다.

애니메이션이 페인트를 트리거하는지 확인

일부 속성은 다른 속성보다 브라우저에서 페인트하는 데 더 많은 비용이 듭니다. 대상 예를 들어 그림자와 같은 블러가 포함된 것은 페인트칠을 더 많이 할 수 있습니다. 이러한 차이가 CSS를 지원하지만, 브라우저 DevTools를 이용하면 다른 페인트 관련 성능 문제가 있을 수 있습니다.

Chrome DevTools

Chrome DevTools에서 렌더링 탭을 엽니다.
페인트 플래시를 선택합니다.
화면에서 포인터를 이동합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

다시 페인트될 것임을 보여주기 위해 녹색으로 강조 표시된 UI 요소 — Google 지도의 이 예에서는 요소가 다시 그려지는 것을 볼 수 있습니다.

전체 화면이 깜박이거나 생각하지 못했던 영역이 강조 표시되는 경우 자세히 조사하면 됩니다

특정 속성으로 인해 페인트 프로파일러는 Chrome DevTools가 도움이 될 수 있습니다.

Firefox DevTools

Settings를 열고 페인트 플래시를 전환합니다.
검사하려는 페이지에서 버튼을 사용 설정하고 마우스 또는 스크롤하여 강조표시된 영역을 확인합니다.

결론

가능하면 애니메이션을 opacity 및 transform로 제한하여 애니메이션을 모두 지원합니다. DevTools를 사용하여 확인 애니메이션의 영향을 받는 경로 단계

페인트 프로파일러를 사용하여 특히 페인트 작업이 비용이 많이 듭니다. 찾은 항목이 있다면 다른 CSS 속성이 더 나은 성능으로 동일한 디자인과 느낌을 줄 수 있습니다.

will-change 속성은 성능 문제가 발생하는 경우에만 드물게 사용합니다.