transform 관련 CSS 속성들

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

transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용한다.

본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 된다.

rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 이다.

특히 애니메이션을 동작시킬 때 transform 속성을 쓰면 효과적이다.

---

복잡한 애니메이션 구현법

예전에 간단한 a -> b같은 one-way 애니메이션들은
=> 시작스타일, 최종스타일, 트리거, transition 주면 된다고 했다.

하지만, a -> b -> a, a -> 1초정지 -> b 같은 복잡한 동작은 못한다.

@keyframes를 쓰면 가능하다.

@keyframes 사용법

1. 가장 먼저 @keyframes 를 정의한다.

@keyframes 움찔움찔{
  0% {
    transform : translateX(0px); /* 애니메이션이 0%만큼 동작시 */
    // 몇 줄을 넣어도 상관없다!!
  }
  50% {
    transform : translateX(-20px); /* 애니메이션이 50%만큼 동작시 */
  }
  100% {
    transform : translateX(20px); /* 애니메이션이 100%만큼 동작시 */
  }
}

@keyframes는 커스텀 애니메이션을 정의하기 위한 공간이라고 생각하면 된다.

'움찔움찔'이라는 애니메이션을

0% 진행했을 때의 CSS,

50% 진행했을 때의 CSS,

100% 진행했을 때의 CSS를 각각 작성한다.

(% 수치는 맘대로 변경, 추가 가능하다)

정리하면,
@keyframes에는 진행도에 따라 어떤 스타일 넣을지만 기입하면 된다.

2. keyframes를 원하는 곳에 첨부한다.

.box:hover {
  // @keyframes를 사용하기 위해,
  // 반드시 들어가야 될 속성 2가지
  animation-name : 움찔움찔;
  animation-duration : 1s;
}

animation 속성을 이용하시면 애니메이션을 동작시킬 수 있다.

꼭 필요한 속성은 name과 duration이고

애니메이션 이름을 name에
애니메이션 동작시간을 duration에 넣으면 된다.

그럼 진짜 마우스 올렸을 때 움찔움찔 애니메이션이 동작한다.

3. 애니메이션 세부조정하기

.box:hover {
  animation-name : 움찔움찔;
  animation-duration : 1s;
  animation-timing-function : linear; 
  /*베지어 주기 => 처음에 빨리 실행시킬지 or 나중에 빨리 실행시킬지 등 조절 가능 */
  animation-delay : 1s; /*시작 전 딜레이 시간*/
  animation-iteration-count : 3; /* 몇회 반복할것인가 */
  // infinite 를 주면, 무한 반복도 된다.
  animation-play-state : paused;  /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
  animation-fill-mode: forwards;  /*애니메이션 끝난 후에 원상복구 하지말고 정지*/
  animation-direction: alternate; /*애니메이션이 자연스럽게 왔다갔다 반복함*/
}

위의 속성을 쓰시면 애니메이션 동작시 세부사항을 더 자세하게 조정하실 수 있다.

---

애니메이션 같은 고급기술 배울 때, 구현에 그치면 초보이고 구현 다음은 성능, 확장성 이런 것들을 고려해야한다.

왜냐면, 애니메이션 잘못 만들면, 싸이트가 엄청 느려진다.
애니메이션 작동이 걸림돌 같은 느낌?? => 엄청 느리고, 버벅이면 역효과임!!

그래서, 성능이 매우 중요하다.
매우 스무스하게 60프레임으로 잘 동작해야한다.

그러려면, transform을 쓰기 바란다.

---

🙋브라우저가 그림 그리는 순서(중요)

• step 1. Render Tree 만들기
  => 그림 그리기 전, 참고 자료 같은 거임
  => CSS를 쭉 정리한 참고자료 라고 생각하면 됨

• step 2. layout 잡기
  => 네모, 네모 박스같은 틀부터 그린다.
  => width, height, margin, padding 등을 처리함

• step 3. paint 하기
  => 만들어진 박스(틀) 안에 색을 입힌다.
  => 정확하게 말하면, px 하나하나에 브라우져가 색을 입힌다.
  => background-color 등을 처리함

• step 4. composite 처리
  => composite 단계의 CSS 속성들을 처리함
  => transform, opacity 등을 처리한다.

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

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

근데 html css를 그래픽으로 바꿀 때

layout 잡기 -> 색칠하기 -> transform 적용하기 순서로 동작합니다.

layout이 바뀌면 layout 부터 transform 까지 쭉 다시 렌더링해야하는데

transform이 바뀌면 transform 부분만 다시 렌더링하면 된다.

그래서, 뭔가 이동시키고 싶으면 margin 쓰는 것 보다 transform 쓰는게 빠르게 동작한다.

특히, 저사양 컴퓨터나 JS가 너무 많이 들어간 사이트에서는 애니메이션은 항상 transform을 써줘야 덜 버벅댄다.

transform이 빠른 또하나의 이유는 composite 단계에 있는 CSS 속성들은 다른 쓰레드에서 처리해준다.

원래 웹브라우저는 쓰레드를 1개만 사용한다.
=> JS 실행, HTML CSS 처리, 전부 한 곳에서 처리함

하지만, composite 단계에 있는 CSS 속성들은 다른 쓰레드에서 처리해준다.

즉, JS 작업이 바빠도 전혀 상관없이, 스무스하게 작동한다.

• transform 변경이 margin 변경보다 빠른 이유
  • transform이 바뀌면 transform 부분만 다시 렌더링하면 됨.
  • composite 단계에 있는 CSS 속성들은 다른 쓰레드에서 처리해준다.

---

성능 잡을 수 있는 여러 방법

1. will-change 속성 사용

.box {
  will-change: transform;
} 

애니메이션을 주는 .box가 약간 느리게 동작한다면

will-change : 애니메이션줄속성;

이걸 써놓으면 성능개선이 가능하다. 바뀔 내용을 미리 렌더링해주는 속성이라 그렇다.

뭔가 이상하게 버벅일 때만 쓰고 애니메이션이 스무스하게 잘 된다면 쓸 이유는 없다.

이상하게 많이 쓰면 브라우저 자체가 더 느려질 수 있다.

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 속성들을 연산할 수 있다.

부담을 덜고싶을 때 사용하면 된다.