[Web] transform, animation을 이용해서 나름 복잡한 애니메이션 만들기

Animation을 이용하면 신기한 효과들을 만들 수 있다.

 

특히 왔다갔다 이런걸 쉽게 만들 수 있다.

 

기본적인 문법은 이렇다.

.box:hover {
  animation-name: shake;
  animation-duration: 1s;
}

@keyframes shake {
  25% {
    transform: rotate(-30deg);
  }

  50% {
    transform: rotate(30deg);
  }

  75% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

 

@keyframes 이름 { }

이렇게 선언한 이후에 내부에 각 %별로 행동을 지정해줄 수 있다.

그리고 애니메이션이 나타나야할 위치에 animation-name, animation-duration을 주면 사용할 수 있다.

 

예시

아래는 Animation과 transform을 이용한 간단한 효과 예시이다.

 

See the Pen Transition/Animation by Jirong (@jirongkim) on CodePen.

 

그냥 Margin, Width, Left 같은걸로 효과 주면 안되나?

transform을 사용하는 가장 큰 이유는 속도이다.

속도가 margin, width, left를 변경하는것 보다 빠른 이유는 웹 브라우저의 렌더링 과정을 보면 알 수 있다.

렌더링 과정을 한마디로 설명하기엔 너무 길기 때문에 다음에 포스팅으로 다루도록 할 것이고,,,

transform을 쓰면 브라우저가 할 일이 더 적어진다 정도로만 알면 된다.

애니메이션 부드럽게 나오는게 필요하다면 transform을 쓰면 좋다.