[Udemy Vue 완벽가이드 Section14] 194. CSS 애니메이션 이해하기

transition 프로퍼티를 사용해 CSS로 변경사항에 전환효과를 적용하는 것 외에도 더욱 상세한 애니메이션을 설정할 수 있다.

 

 

# @keyframes

먼저 CSS로 애니메이션을 정의해야 하는데 @keyframes을 통해 정의할 수 있다.

그 뒤에 원하는 이름을 입력해보자. 'slide-fade'로 해보자. ('slide-fade'는 임의로 설정한 것.)

@keyframes slide-fade {}

이를 통해 애니메이션이 어떻게 동작해야 하는지를 상세히 정의할 수 있고, 필요로 하는 여러 상태를 퍼센트로 나타낼 수 있다.

가령,

1) 애니메이션 완성도가 0%인 경우, 다시 말해 첫 시작인 경우

 - transform: translateX(0)로 설정한다. 이동한 적이 없으므로.

 - scale(1)도 함께 설정한다. scale은 변형 함수의 일종으로, 이를 통해 블록 크기를 바꿀 수 있다.

@keyframes slide-fade {
 0% {
   transform: translateX(0) scale(1);
 }
}

 

 

2) 애니메이션 시간이 70% 지난 뒤에는,

 - 앞서 0이었던 translateX를 좌측 120px로 설정하고,

 - scale(1.1)을 통해 10% 더 커지도록 설정해보자. 1은 기존 스케일이고, 1.1은 10% 커진 스케일이다.

@keyframes slide-fade {
 0% {
   transform: translateX(0) scale(1);
 }
 
 70% {
   transform: translateX(-120px) scale(1.1);
 }
}

 

3) 애니메이션 시간이 100%에 도달했을 때는,

 - translateX를 최저 수치인 -150px로 설정하여 좌측 끝으로 보내고,

 - scale(1)을 통해서 원래 크기로 되돌린다.

@keyframes slide-fade {
 0% {
   transform: translateX(0) scale(1);
 }
 
 70% {
   transform: translateX(-120px) scale(1.1);
 }
 
 100% {
   transform: translateX(-150px) scale(1);
 }
}

 

이렇게 애니메이션의 절반 이상 지났을 때는 크기를 키웠다가 마지막이 되면 다시 기존 크기로 되돌아가도록 설정했다.

이렇게 애니메이션 하나에 여러 상태를 설정해보았다.

애니메이션을 정의하고 애니메이션 실행 중의 여러 상태, 일명 keyframes까지 설정을 마쳤다.

 

 

이제 이걸 div에 적용해볼텐데, 먼저 .block에서 transition을 제거해보자.

여기선 animation을 사용할 테니 transition은 주석처리할 예정이다.

 

.animate에서 transform이 아닌 animation이라는 CSS 프로퍼티를 사용할 거다.

해당 CSS클래스가 요소에 추가되면, 이 프로퍼티로 애니메이션을 추가한다.

- 정의한 keyframes 중 하나를 참조해야 하니, 아래에 설정한 이름인 'slide-fade'를 입력해보자.

- 각 keyframes간 소요되는 지속 시간을 설정해야하는데 0.3초로 설정해보자.

- 그리고 다음 상태에 도달할 때 속도를 제어하는 ease-out 함수도 추가해보자. 시작은 빠르고 천천히 끝나게 하거나, 시작은 느리고 빨리 끝나게 할 수 있다.

<style>
/* 생략 */
.block {
  width: 8rem;
  height: 8rem;
  background-color: #290033;
  margin-bottom: 2rem;
  /* transition: transform 0.3s ease-out; */
}
.container {
  max-width: 40rem;
  margin: 2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2rem;
  border: 2px solid #ccc;
  border-radius: 12px;
}
.animate {
 /* transform: translateX(-150px); */
 animation: slide-fade 0.3s ease-out;
}

@keyframes slide-fade {
  0% {
    transform: translateX(0) scale(1);
  }

  70% {
    transform: translateX(-120%) scale(1.1);
  }

  100% {
    transform: translateX(-150%) scale(1);
  }
}
</style>

 

 

# 애니메이션 동작 후, 다시 원래상태로 돌아오는 문제

저장하고 'Animate'버튼을 누르면, 애니메이션 동작 이후 다시 원래상태로 돌아오는 것을 볼 수 있다.

버그가 아니라 CSS애니메이션의 기본 동작이다.

→ forwards

여기에 forwards를 추가해서 CSS에 마지막 keyframe, 즉 마지막 상태가 애니메이션이 적용된 요소의 새로운 모습, 새로운 상태가 되도록 설정하자.

forwards를 추가한 후, 새로고침하여 Animate를 클릭하면 커스텀 애니메이션에 따라 좌측으로 이동하고 그 상태를 유지한다.

.animate {
 animation: slide-fade 0.3s ease-out forwards;
}

 

 

이렇게 transition이나 animation 프로퍼티로 이런 전환 효과를 구현할 수 있다.

간단히 Vue를 통해서 애니메이션이 적용될 요소에 animate 클래스를 동적으로 적용하기만 하면 된다.

이 때 요소는 꼭 div가 아니라 그 어떤 것이라도 괜찮다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.