브라우저 CSS Animation의 동작 과정

왜 애니메이션이 느리게 느껴질까...🐢

1000ms / 60FPS = 약 16.7ms(0.0167초)

Rendering pipeline

• Style: 요소들에 적용된 스타일들 계산하기

• Layout: 각가의 요소의 위치(x, y) 요소들 설정하기

• Paint: 요소들이 갖고있는 픽셀들을 Layers에 그리기

• Layer: 요소들이 그룹화되어 있는 부분, Photoshop 레이어와 아이디어가 비슷하다.

• Composite: Layers를 합성해서 스크린에 그리기

Layout 애니메이션

결국 요소들이 많게 될수록 Layout에 시간을 많이 쏟게 됌!!

Paint 애니메이션

pipeline 과정중 가장 긴 시간이기도 합니다.

Composite 애니메이션

사이트에서 각 엔진마다 CSS 프로퍼티들의 렌더링 단계를 볼 수 있다.

Layer

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

// 이렇게는 하지 말자..
*,
*::before,
*::after {
  will-change: all;
}

.element:hover {
  will-change: transform;
  transition: transform 2s;
  transform: rotate(30deg) scale(1.5);
}

.element {
  /* style rules */
  transition: transform 1s ease-out;
}
.element:hover {
  will-change: transform;
}
.element:active {
  transform: rotateY(180deg);
}

계속 사용되는 인터렉션은 유지, 예를 들어 Sidebar

var el = document.getElementById('element');

el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser(event) {
  event.target.style.willChange = 'transform, opacity';
}

function removeHint(event) {
  // 해제 해주자
  event.target.style.willChange = '';
}

IE 같이 will-change 지원이 안되는 브라우저는 transform: translateZ(0) 통해서 생성 가능..그냥 IE는 편히 보내주자 🪦

그래서 애니메이션이 왜 느려지냐고...🧐

이동관련

// 멀리 이동하기~
.animate {
  animation: slide-in 0.7s both;
}

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

// 제자리 돌리기~
.animate {
  animation: rotate 0.7s ease-in-out both;
}

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

크기, 가시성관련

// 크기 스케일 업, 다운
.animate1 {
  animation: scale 1.5s both;
}

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

.animate2 {
  animation: opacity 2.5s both;
}

// 가시성
@keyframes opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

📝 결론