[CSS] transform, keyframes로 애니메이션 효과 주기

transform vs keyframes

• transform: 상태가 한번 바뀔때 사용 (a → b)
• keyframes: 상태가 여러번 바뀔때 사용 (a → b → a, a → b → c)

 

transform 속성

1. rotate()

플러스는 오른쪽으로 마이너스는 왼쪽으로 회전

div {
  transform: rotate(90deg);
}

2. translate()

translateX는 X축 좌표로 translateY는 Y축 좌표로 이동한다

X, Y가 없는 translate()은 X, Y값을 모두 움직일 수 있다

엘리먼트를 움직이는 에니메이션을 줄 경우에는 padding, margin으로 이동하는 것보다 translate()이 더 빨리 움직인다

div {
  transform: translate(100px, 100px);
}

3. scale()

엘리먼트의 크기를 변화시키고 싶을때 사용

div {
  transform: scale(1); /* default */
  transform: scale(1.2);
}

 

animation 속성

애니메이션의 속성으로 여러값이 있지만 애니메이션 이름과, 동작시간은 필수다.

div {
  animation: animation-name, animation-duration;
}

 

keyframes 문법

keyframes를 사용해 복잡한 애니메이션을 구현한 후 animation의 속성으로 사용할 수 있다.

@keyframes 애니메이션이름 {
  0% {
    /* 애니메이션이 0% 진행했을때 적용할 스타일 */
  }
  50% {
    /* 애니메이션이 50% 진행했을때 적용할 스타일 */
  }
  100% {
    /* 애니메이션이 100% 진행했을때 적용할 스타일 */
  }
}

@keyframes 애니메이션이름 {
  from {
    /* 애니메이션이 0% 진행했을때 적용할 스타일 */
  }
  to {
    /* 애니메이션이 100% 진행했을때 적용할 스타일 */
  }
}

 

예시

.App-logo {
  animation: App-logo-spin infinite 20s linear;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}