transform으로 애니메이션 만들기

transform은 어떤 요소를 독립적으로 움직이게 할 때 사용한다. 다른 요소들에 영향 없이 움직인다. 

.box {
  transform : rotate(10deg); //회전하기
  transform : translate(10px, 20px); //움직이기 translateX, translateY로 쓸 수 있음
  transform : scale(2); //배율로 확대 축소
  transform : skew(30deg); //비틀기
  
  /*transform 두개 이상을 한꺼번에 쓰려면*/
  transform : rotate(10deg) translateX(30px);
}

이런식으로 쓰며, 단순히 margin등을 주는 것 보다 부드럽게 움직인다고 한다.

 

단순한 애니메이션들은 transform 과 transition 으로 

.box:hover {
  transform: translateX(50px);
  transition: all 1s;
}

 

이렇게 처음 화면과 끝 화면만 만들어서 움직이게 줄 수 있다. 하지만 중간중간 애니메이션이 추가되면 

@keyframes 를 사용하면 된다.

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

이런식으로 움찔움찔이란 이름을 주고 퍼센트별로 어떤 행동을 할지 정해주는 것이다. 

그런 다음, 원하는 곳에 첨부하면 된다.

.box:hover {
  animation-name : 움직이기;
  animation-duration : 1s;
}

animation-name 으로 어떤 keyframe을 쓸건지 duration으로 몇초동안 진행할건지 정하면 된다.

.box:hover {
  animation-name : 움직이기;
  animation-duration : 1s;
  animation-timing-function : linear; /*애니메이션이 어떻게 재생되는지(빨랐다가 천천히 이런)*/
  animation-delay : 1s; /*시작 전 딜레이*/
  animation-iteration-count : 2; /*몇회 반복할것인가*/
  animation-play-state : paused;  /*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
  animation-fill-mode: forwards;  /*애니메이션 끝난 후에 원상복구 하지말고 정지*/
}

세부조정은 필요할 때 찾아서 사용하면 된다.

 

성능을 잡을 수 있는 방법도 있다고 한다.

 

1. will-change

.box {
  will-change: transform;
}

will-change: 애니메이션줄속성(지금은 transform으로 바꾸고 있으므로); 하면 바뀔 내용을 미리 렌더링해서 성능 개선이 된다고 한다. 그렇지만 재생이 잘되면 굳이 쓸 이유가 없다고 한다.

 

2. 하드웨어 가속

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

이렇게 3D로 이동하면  CPU가 아닌 GPU를 사용해 연산하게 되어서 저렇게 translate3d(0,0,0)을 주면 아무것도 일어나진 않아도 GPU를 이용해 연산하게 된다.