keyframe

정교한 애니메이션 줄 때 사용하는 keyframe에 대해 알아보자

📌 keyframe

keyframe을 사용하면 진행률에 따라 애니메이션을 지정해 줄 수 있다.

사용방법

@keyframe 키프레임명 { { 진행률1 :} {진행률2 : }...}
분기점 개수는 제한 없다. 순서만 지켜주도록 하자.

@keyframes moveX {
  0% {
    transform: translateX(0px);
  }

  50% {
    /* transform: translateX(-100px); */
    margin-left: 100px;
  }

  75% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(0px);
  }
}

✔️ DOM에 keyframe주기

DOM이 어떤 상태일 때 해당 애니메이션을 줄 지 pseudo class로 정해준다

.ani-text {
  background-color: black;
  color: white;
}

.ani-text:hover {
  animation-name: moveX;
  animation-duration: 1s; // 1초 동안 해당 애니메이션 재생

}

✔️ 애니메이션 옵션 설정

애니메이션에 부가적인 설정을 할 수도 있다.
반복횟수, 진행방향 등 수가 많으므로 필요 시 찾아 사용하자.

.ani-text:hover {
  animation-name: moveX;
   animation-timing-function : linear; /*베지어 주기*/
  animation-delay : 1s; /*시작 전 딜레이*/
  animation-iteration-count : 3; /*몇회 반복할것인가*/
  animation-play-state : paused;  /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
  animation-fill-mode: forwards;  /*애니메이션 끝난 후에 원상복구 하지말고 정지* 
}

📌 브라우저가 DOM을 그리는 과정

브라우저는 HTML/CSS를 2D 그래픽으로 표현하는 프로그램이다.
render tree 그리기 > lay out > paint > composite
순으로 DOM을 그린다.

render tree 어떻게 그릴 건지 청사진을 그리는 단계이다.
layout 기본 뼈대를 그린다. width, margin 등...
paint 색칠을 한다.
composite 부가적인 요소를 그린다 (opacity, transition 등)

만약 한 단계에서 수정이 일어나면 해당 단계부터 다시 DOM을 그리는 과정을 거친다.
만약 좌우 애니메이션을 margin으로 주었다면
브라우저는 lay out 단계부터 시작해 paint, composite 단계를 거쳐 DOM을 다시 그린다. 때문에 컴퓨터 사양이 안 좋을 경우 or 해당 사이트에 자바스크립트가 많을 경우 버벅일 수 있다.

만약 transition으로 애니메이션을 준다면
위 과정을 안 거치기 때문에 성능이 향상된다.

또한 composite에서 처리하는 요소들은, 브라우저가 사용하는 스레드 외 다른 스레드에서 처리되므로 실행시간을 단축시킬 수 있다.
(c.f. 브라우저는 싱글 스레드 방식)

애니메이션 시 성능 올리기

1. will-change

바뀔 내용을 미리 렌더링해주는 속성이다

.box {
  will-change: transform;
} 

뭔가 이상하게 버벅일 때만 쓰기. 남발하면 브라우저 자체가 더 느려질 수 있음

https://dev.opera.com/articles/ko/css-will-change-property/

2. 하드웨어 가속

애니메이션이 너무 많아 CPU만으로 전부 연산이 불가능하다면 GPU의 도움을 받자

.box {
  transform: translate3d(0, 0, 0);
}

transform : translate3d를 쓰면 3D 이동도 가능한데 이 속성의 경우 GPU를 사용해서 연산하게 된다.
translate3d(0, 0, 0) 이런 식으로 아무데도 움직이지 않는 3D 이동명령을 주고
뒤에 필요한 transform을 더 적용한다면 GPU를 이용해서 .box가 가진 transform 속성들을 연산할 수 있다.