CSS 애니메이션 원리와 성능 최적화

1. 기본 속성들

.box {
  transform : rotate(10deg); // 회전
  transform : translate(10px, 20px); //좌표 이동
  transform : scale(2); // 확대축소
  transform : skew(30deg); // 비틀기
  
  /*transform 두개 이상을 한꺼번에 쓰려면*/
  transform : rotate(10deg) translateX(30px);
}

---

2. keyframes 사용

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



@keyframes 와리가리 {
    0%{
      transform: translateX(0px);  
    }
    33.33%{
        transform: translateX(-100px);  
    }
    66.66%{
        transform: translateX(100px);  
    }
    100%{
        transform: translateX(0px);  
    }
}

• 중간에 퍼센트 수치는 커스텀 가능.

---

3. 성능

3-1 margin, width, left, 이런거 말고 transform 쓰라는 이유

• 크롬같은 웹브라우저들은 html css를 2D 그래픽으로 바꿔주는 간단한 프로그램입니다.

근데 html css를 그래픽으로 바꿀 때
1. Render
2. Treelayout 잡기
3. 색칠하기
4. transform 적용하기 순서로 동작합니다.

margin.width 속성이 바뀌면 "layout" 부터 transform 까지 쭉 다시 렌더링해야하는데
transform이 바뀌면 transform 부분만 다시 렌더링하면 됩니다.
그래서 뭔가 이동시키고 싶으면 margin 쓰는 것 보다 transform 쓰는게 빠르게 동작합니다.

3-2 성능 향상 : will-change

.box {
  will-change: transform;
} 

애니메이션을 주는 .box가 약간 느리게 동작한다면
will-change : 애니메이션줄속성;
이걸 써놓으면 성능개선이 가능합니다. 바뀔 내용을 미리 렌더링해주는 속성이라 그렇습니다.
뭔가 이상하게 버벅일 때만 쓰시고 애니메이션이 스무스하게 잘 된다면 쓸 이유는 없습니다.
"이상하게 많이 쓰면 브라우저 자체가 더 느려질 수 있습니다."

3-3 성능 향상 : GPU 도움 받기

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

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