CSS3 @keyframes로 키프레임 애니메이션 정의하는 방법

CSS3에서 키프레임(keyframes) 애니메이션을 만들려면 개별 키프레임을 먼저 정의해야 합니다. 키프레임은 CSS3 애니메이션의 중간 단계를 제어하는 역할을 하며, @keyframes 규칙 안에 애니메이션의 시작점(from)과 끝점(to) 또는 백분율(%) 기준의 중간 지점들을 지정할 수 있습니다.

키프레임을 정의한 후에는 요소의 animation 속성에 해당 키프레임 이름과 지속 시간, 반복 횟수 등을 설정하여 실제 애니메이션을 적용합니다.

CSS3 키프레임 정의 예제 코드

다음은 CSS3에서 키프레임을 정의하고 색상 변화와 이동 애니메이션을 적용하는 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 100px;
   height: 100px;
   background: red;
   position: relative;
   animation: colorChange 5s infinite;
}
@keyframes colorChange {
   from {
      background: red;
      left: 0px;
   }
   to {
      background: rgb(32, 229, 255);
      left: 300px;
   }
}
</style>
</head>
<body>
<h1>CSS에서 키프레임 정의하기</h1>
<div></div>
<h2>위의 사각형은 시간이 지남에 따라 색상과 위치가 변합니다</h2>
</body>
</html>

코드 설명

@keyframes colorChange: 'colorChange'라는 이름의 키프레임 애니메이션을 정의합니다.
from: 애니메이션 시작 시점의 상태로, 배경색은 빨간색(red), 왼쪽 위치는 0px입니다.
to: 애니메이션 종료 시점의 상태로, 배경색은 하늘색 계열(rgb(32, 229, 255)), 왼쪽 위치는 300px로 이동합니다.
animation: colorChange 5s infinite: div 요소에 해당 애니메이션을 5초 동안 무한 반복(infinite)으로 적용합니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

CSS3 @keyframes로 키프레임 애니메이션 정의하는 방법

5초가 지난 후에는 사각형의 위치와 색상이 아래와 같이 변경됩니다.

CSS3 @keyframes로 키프레임 애니메이션 정의하는 방법

이처럼 @keyframes를 활용하면 별도의 JavaScript 없이도 순수 CSS만으로 부드럽고 다양한 애니메이션 효과를 구현할 수 있습니다.