transform & animation 쓰는 이유

1. transform의 속성

• rotate 회전
• translate 좌표 이동
• scale 확대 축소
• skew 비틀기

.box1 {
  transform : rotate(10deg); 
}
.box2 {
  transform : translate(10px, 20px); 
}
.box3 {
  transform : scale(2);
}
.box4 {
 transform : skew(30deg);
}

 

 

- 2개 이상의 속성을 부여하고 싶을 경우

.box1 {
  transform : rotate(10deg) scale(1.5);
}

 

 

 

2. animation 속성

• @keyframs 정의하기
  
  • x% 애니메이션 x% 동작시 실행

@keyframes 좌우움직임{
  0% {
    transform : translateX(0px);
  }
  50% {
    transform : translateX(-50px);
  }
  100% {
    transform : translateX(50px);
  }
}

 

• 원하는 곳에 사용하기

.box:hover {
  animation-name : 좌우움직임;
  animation-duration : 1s;
}

 

 

- 애니메이션 세부 속성

• animation-duration : 1s; 재생 시간
•  animation-timing-function : linear; 베지어 주기
•  animation-delay : 1s; 시작 전 시간
• animation-iteration-count : 3; 반복 횟수
• animation-play-state : paused; 애니메이션 멈추기
• animation-fill-mode: forwards;  애니메이션 끝난 후에 원상복구 후 작업 여부

 

 

3. transform & animation 쓰는 이유

• transform를 사용하지 않고 margin, width, left 등등으로 조절이 가능하다.
  
  • 그러나 웹브라우저 구동 방식을 알게 된다면 쓰는것을 자제하는 것이 좋다.
     
• 브라우저의 구동 방식
  • Render Tree
  • layout
  • paint
  • composite
     
• composite 단계에는 transform, animation이 존재를 한다.

/* translateX를 사용하면 composite만 변경되면 되지만 */
  50% {
    transform : translateX(-50px);
  }
  
 /* margin를 사용하면 layout 단계 부터 다시 실행해야 된다.*/
  50% {
    margin-left: -100px;
    }

 

- 성능 개선을 위한 속성 

• 성능 개선을 위한 속성으로 will-change: all; 이 존재를 한다.
• 과도한 사용은 오히려 안 좋은 영향을 만들수있다.
• 참고 사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/will-change