[HTML, CSS] [이론] transform & animation으로 애니메이션 만들기

▶ one-way애니메이션은 그냥 trantition 이용, 그 이상은 @keyframes를 이용한다.

 

⭐ transform 속성

• 회전하고 싶을 때 rotate(각도)
• 좌표 이동하고 싶을 때 translateX(픽셀) : X축 이동
• translateY()는 Y축 이동
• scale(숫자)는 크기 변화

• transform 속성들

.box {
  transform : rotate(10deg);
  transform : translate(10px, 20px);
  transform : scale(2);
  transform : skew(30deg);

/*transform 두개 이상을 한꺼번에 쓰려면*/transform : rotate(10deg) translateX(30px);
}

 

⭐ @keyframes : 복잡한 애니메이션 정의

 

▶ 1. @keyframes정의

@keyframes 작명 {}

 

EX)

@keyframes shake{

    0% {

        transform: translateX(0deg);

    }

    25% {

        transform: rotate(-10deg);

    }

    50% {

        transform: rotate(10deg);

    }

    75% {

        transform: rotate(-10deg);

    }

    100% {

        transform: translateX(0deg);

    }

}

 

 

▶  2. @keyframes 적용

animation-name: 작명;

 

EX)

.ani-btn:hover {

    animation-name: shake;

    animation-duration: 0.5s;

    animation-iteration-count: 2;

}

 

• animation 속성들

.box:hover {
  animation-name : 움찔움찔;
  animation-duration : 1s;
  animation-timing-function : linear;/*베지어 주기*/
  animation-delay : 1s;/*시작 전 딜레이*/animation-iteration-count : 3;/*몇회 반복할것인가*/
  animation-play-state : paused;/*애니메이션을 멈추고 싶은 경우 자바스크립트로 이거 조정*/
  animation-fill-mode: forwards;/*애니메이션 끝난 후에 원상복구 하지말고 정지*/
}

 

 

---

 

✅ transform 을 쓰면 좋은 점? 성능이 좋다.

• 애니메이션이 느리고 버벅이면 역효과이므로 성능 중요

▶ 더 성능이 좋은 이유는???

 

1. 웹 브라우저 동작

1. Render Tree
2. Layout : margin, width, height, 등 처리
3. Paint : 색칠함 background-color 같은 거 처리
4. Composite : transform, opacity 같은 거 처리

→ margin을 쓰면 2,3,4를 다시 해야하지만 transform을 쓰면 4만 다시 하면 된다.

 

2. transform같은건 다른 쓰레드에서 처리해준다.