CSS transform 으로 애니메이션 구현하기

CSS transform 속성으로 요소에 회전(rotate), 좌표이동(translate), 크기조절(scale) 등의 효과 줄 수 있다.

translate 대신 margin 등의 레이아웃을 바꿔도 동작하지만 animation효과 위해 layout바꾸는 것은 성능을 저하시킨다.

브라우저가 그림그리는 순서
1. Render Tree만들기(parsing 및 style)
2. Layout잡기
3. Paint 
4. composite 처리(transform , opacity 등) 
margin 변경 하면 2번부터 다시 해야하지만, transform 변경하면 4번부터 다시 하면 됨.따라서 바뀐 layout 부터 렌더링하는것보다 바뀐 transform만 렌더링하는것이 빠르게 동작함 
또한 transform 처리는 다른 쓰레드에서 처리해주므로 빠르게 동작함

"스타일 속성 중 position, width, height 등과 같이 기하적 변화를 유발하는 속성을 변경하면 레이아웃이 발생한다. transform을 사용한 엘리먼트는 레이어로 분리되기 때문에 영향받는 엘리먼트가 제한되어 레이아웃과 페인트를 줄일 수 있다. 그리고 합성만 발생시키기 때문에 애니메이션에서 사용 시 렌더링 속도가 향상할 수 있다. 때에 따라 하드웨어가 지원될 경우 GPU를 사용할 수 있으므로 성능이 빠르다. 예를 들어 left, top을 사용하면 모든 프레임마다 엘리먼트와 배경이 합성되어 많은 시간이 걸리므로, transform: translate()를 사용해야 한다."

 

 

 

애니메이션 구현 방법

 

1. @keyframse 정의

@keyframes textTrasnform{
  0% {
    transform : translateX(0px); /* 애니메이션이 0%만큼 동작시 */
  }
  50% {
    transform : translateX(-20px); /* 애니메이션이 50%만큼 동작시 */
  }
  100% {
    transform : translateX(20px); /* 애니메이션이 100%만큼 동작시 */
  }
}

 

 

2. keyframes를 적용

.box:hover {
  animation-name : textTransfrom; /* keyframes 명으로 지정한 애니메이션 명 */
  animation-duration : 1s;       /* 애니메이션 한 사이클 완료에 걸리는 시간 */

}

이 외 속성들 추가로 적용 

  animation-timing-function : cubic-bezier(0.1, 0.7, 1.0, 0.1); /* 애니메이션 진행방식 */
  animation-delay: 1s;     /* 지연시간 */
  animation-iteration-count : 3; /* 재생 횟수*/
  animation-play-state : paused; /* 애니메이션 실행할지 일시정지할지 설정 , 자바스크립트로 조정 */
  animation-fill-mode : forwards;   /*애니메이션 채우기 모드 - forward : 애니메이션 적용상태 유지*/

 

 

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/animation

animation - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN