[CSS] keyframes 속성 사용

@keyframes

 

CSS에서 복잡한 애니메이션을 만들기 위해 사용된다.

@keyframes animation-name {
  from {
    /* 초기 상태 */
  }
  to {
    /* 최종 상태 */
  }
}

/* 또는 */

@keyframes animation-name {
  0% {
    /* 초기 상태 */
  }
  100% {
    /* 최종 상태 */
  }
}

@keyframes 규칙은 애니메이션의 이름과 함께 정의되며,

각 단계는 애니메이션의 진행 비율(0%부터 100%까지) 또는 키워드(from, to)를 사용하여 정의할 수 있습니다.

---

애니메이션 속성들

 

애니메이션을 적용하기 위해 다음과 같은 CSS 속성을 사용합니다.

.element {
  animation-name: animation-name;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

1. animation-name: 적용할 @keyframes의 이름을 지정합니다.
2. animation-duration: 애니메이션이 지속되는 시간을 설정합니다.
3. animation-timing-function: 애니메이션의 속도 곡선을 정의합니다.
4. animation-delay: 애니메이션이 시작되기 전의 지연 시간을 설정합니다.
5. animation-iteration-count: 애니메이션을 반복할 횟수를 설정합니다.
6. animation-direction: 애니메이션의 방향을 설정합니다.
7. animation-fill-mode: 애니메이션이 끝난 후의 스타일 상태를 정의합니다.
8. animation-play-state: 애니메이션을 재생할지 중지할지를 설정합니다.

---

각 속성의 자세한 설명

1. animation-name: 사용할 키프레임 애니메이션의 이름을 지정합니다.
2. animation-duration: 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 설정합니다.
3. animation-timing-function: 애니메이션의 속도 곡선을 지정합니다. 예를 들어, ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier 등이 있습니다.
4. animation-delay: 애니메이션이 시작되기 전에 대기할 시간을 설정합니다.
5. animation-iteration-count: 애니메이션이 반복되는 횟수를 설정합니다. infinite로 설정하면 무한 반복됩니다.
6. animation-direction: 애니메이션이 재생되는 방향을 지정합니다. normal, reverse, alternate, alternate-reverse 등의 값이 있습니다.
7. animation-fill-mode: 애니메이션이 끝난 후 요소가 유지할 상태를 설정합니다. none, forwards, backwards, both가 있습니다.
8. animation-play-state: 애니메이션이 실행 중인지(running) 또는 일시 중지(paused) 상태인지를 설정합니다.