CSS @keyframes 완벽 가이드 – 애니메이션 기초와 실전 예제

CSS만으로도 손쉽게 애니메이션을 만들 수 있습니다. 특히 서드파티 프레임워크나 플러그인 없이 순수 CSS만으로 구현할 수 있다는 점이 큰 장점입니다.

이러한 애니메이션을 만들 때 반드시 알아야 할 핵심 도구가 바로 @keyframes 규칙입니다.

@keyframes 문법

@keyframes는 CSS 앳룰(at-rule)의 하나입니다. 앳룰은 CSS가 어떻게 동작해야 하는지를 지정하는 규칙으로, @viewport, @supports 등 다양한 종류가 있습니다.

@keyframes 규칙은 다음과 같은 문법으로 정의합니다.

@keyframes <name> {
    from {
    /* 시작 상태 정의 */
    }

    to {
    /* 종료 상태 정의 */
    }
}

from과 to 키워드 대신 백분율(%)을 사용하면 더욱 세밀한 애니메이션을 선언할 수 있습니다.

@keyframes <name> {
  0% { }
  50% { }
  100% { }
}

참고: 새로 만든 키프레임을 실제로 사용하려면 animation-name 속성의 값으로 지정해야 합니다. 또한 animation-duration 속성으로 애니메이션이 진행되는 시간을 설정할 수 있습니다.

이제 마법 볼이 나타났다 사라지는 애니메이션을 만들어 보겠습니다. 중간에 헷갈리는 부분이 있다면 함께 제공된 Codepen 예제를 참고하세요.

가장 먼저 해야 할 일은 애니메이션을 정의하는 것입니다. 여기서는 magic-ball이라는 이름으로 정의하겠습니다.

@keyframes magic-ball {
  from {
    background-color: limegreen;
  }
  to {
    background-color: blueviolet;
  }
}

위 코드는 배경색을 라임그린(limegreen)에서 블루바이올렛(blueviolet)으로 변경하는 애니메이션입니다. 어떤 요소에도 적용할 수 있지만, 여기서는 원(circle) 형태의 요소에 적용해 보겠습니다.

.circle {
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  animation-name: magic-ball;
  animation-duration: 4s;
}

잊지 마세요: 키프레임 애니메이션이 실제로 작동하려면 반드시 animation-name 속성의 값으로 지정하고, animation-duration으로 초 단위의 지속 시간을 설정해야 합니다.

이제 볼이 나타났다 사라지는 애니메이션이 완성되었습니다! 💥

이번에는 사각형에 움직임 효과를 주는 또 다른 애니메이션을 만들어 보겠습니다. 애니메이션 이름은 moveIn으로 하고, 이번에는 백분율을 활용해 보겠습니다.

@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

opacity는 요소의 투명도를 의미합니다. 이렇게 만든 애니메이션을 사각형 요소에 적용해 보겠습니다.

.square {
  width: 10rem;
  height: 10rem;
  background-color: greenyellow;
  animation-name: moveIn;
  animation-duration: 4s;
}

아주 적은 코드만으로도 훌륭한 효과를 얻을 수 있다는 것을 확인할 수 있습니다!

애니메이션 학습을 이어가고 싶다면 MDN의 CSS 애니메이션 공식 문서를 읽어보는 것을 추천합니다. 또한 이 글에서는 애니메이션을 다듬는 방법으로 지속 시간(duration) 하나만 다루었지만, 그 외에도 살펴볼 가치가 있는 애니메이션 하위 속성들이 많습니다!

마지막으로, 모든 CSS 속성이 애니메이션화될 수 있는 것은 아니라는 점을 기억하세요. 애니메이션 가능한 속성 목록을 미리 확인해 두면 불필요한 시행착오를 줄일 수 있습니다.