(CSS) @keyframe과 animation 사용 방법 정리

 

 

이전에 transition 사용 방법에 대해서 포스팅을 했다.

 

하지만 transition만으로는 복잡한 애니메이션을 만들기 어렵다. 

 

이때 animation과 @keyframes을 사용하면 더 다양하고 복잡한 애니메이션을 만들 수 있다.

 

(CSS) transition 사용 방법 정리

 

 

transition , animation, @keyframe 차이

설명하기 앞서 transition,  animation, @keyframe의 차이를 확실하게 정리하고자 한다. (꽤나 헷갈리기 때문이다.)

 

위에서 언급했듯이 transition은 단순한 변화를 애니메이션화할 때 사용되고,

 

animation은 더 복잡한 애니메이션을 만들 때 사용되며,

 

이 복잡한 애니메이션을 정의할때 @keyframes를 사용한다. 

 

 

 

@keyframe 사용법

@keyframes은 각 애니메이션의 프레임을 정의할 수 있다.

 

프레임을 정의할 수 있는 방법은 두 가지다. 

 

각각은 아래와 같이 사용한다. 

 

1. 프레임이 두 개 일 때 :  from, to

2. 프레임이 두개 이상일 때 : 0%~100%

@keyframes beat {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.5);
  }
  50% {
  	transform: scale(2);
  }
  75% {
  	transform: scale(1.5);
  }
  100% {
  	transform: scale(1);
  }
}

 

 

 

 

animation 사용법

@keyframe을 정의한 뒤에 적용하려면 animation을 사용해야 한다.

이때 애니메이션을 적용하고자 하는 요소에 animation 키워드를 추가하면 된다.

 

animation 키워드 사용법은 transition과 같다.

 

다만 맨 앞에 property대신 keyframe 이름이 들어간다는 것이 다르다.

 

.circle {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  animation: moveAndChangeColor 5s ease-in-out infinite;
}

 

 

 

animation, @keyframe 사용 예시

 

See the Pen animation by 김다영 (@xnpzlttb-the-solid) on CodePen.