@keyframes in CSS

1. @keyframes 애니메이션 정의

@keyframes example {
  0% {
    background-color: red;
    transform: translateX(0);
  }
  100% {
    background-color: blue;
    transform: translateX(100px);
  }
}

• @keyframes example { ... }

  • 여기서 example은 애니메이션의 이름입니다. 이 이름을 통해 나중에 CSS 규칙에서 애니메이션을 참조하게 됩니다.

• 0% (시작 상태):

  • background-color: red;
    • 애니메이션 시작 시, 요소의 배경색을 빨간색으로 설정합니다.
  • transform: translateX(0);
    • 요소의 위치를 수평 방향으로 0픽셀 이동, 즉 원래 위치에 있도록 지정합니다.

• 100% (끝 상태):

  • background-color: blue;
    • 애니메이션이 끝날 때, 요소의 배경색을 파란색으로 변경합니다.
  • transform: translateX(100px);
    • 요소를 오른쪽으로 100픽셀 이동시킵니다.

중간 상태를 더 추가하고 싶다면 0%와 100% 사이에 25%, 50%, 75%와 같이 키프레임을 추가할 수 있어요.

2. 애니메이션 적용

.element {
  width: 100px;
  height: 100px;
  animation: example 2s infinite;
}

• .element { ... }

  • 이 클래스가 적용된 요소에 대해 스타일을 지정합니다.

• width: 100px;와 height: 100px;

  • 요소의 가로, 세로 크기를 100픽셀로 지정하여, 애니메이션 효과가 잘 보이도록 합니다.

• animation: example 2s infinite;

  • example: 위에서 정의한 애니메이션 이름을 참조합니다.
  • 2s: 애니메이션이 2초 동안 실행됩니다. (즉, 0%에서 100%까지 2초 걸림)
  • infinite: 애니메이션을 무한 반복합니다. 즉, 2초마다 처음부터 다시 실행됩니다.

전체 동작 요약

1. 시작:

   • .element에 빨간색 배경과 원래 위치에서 시작합니다.

2. 2초 동안 진행:

   • 시간이 지나면서 요소의 배경색이 빨간색에서 파란색으로 점차 바뀌고,
   • 동시에 요소가 오른쪽으로 100픽셀 이동합니다.

3. 반복:

   • 애니메이션이 끝나면 다시 처음 상태로 돌아가 같은 효과를 무한 반복하게 됩니다.

이 예제 코드를 통해 CSS의 @keyframes를 사용하여 간단한 애니메이션을 어떻게 정의하고 적용하는지, 그리고 애니메이션의 각 단계를 어떻게 설정하는지 이해할 수 있어요.