[CSS] @keyframes

@keyframes

@keyframes를 사용하여 특정 지점에 키프레임들을 설정함으로써 애니메이션을 부드럽게 해주는 속성입니다.

문법

@keyframes [이름] {
  [발생 시점] {
    [애니메이션 속성: 값]
  }
}

 

[이름]: keyframe을 식별하는 이름

[발생 시점]: keyframe이 발생해야 하는 시점

- from: 시작 offset인 0%를 의미

- to: 마지막 offset인 100%를 의미

- 0%~100%: 발생해야 하는 시간의 백분율 값

[애니메이션 속성: 값]: 애니메이션으로 제어할 스타일 속성과 값

예제

from, to를 활용한 방법

@keyframes slideRight {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

 

%를 활용한 방법

@keyframes slideRight {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

 

%를 사용하여 세밀하게 애니메이션을 제어하는 방법

@keyframes slideRight {
  0% {
    transform: translateX(0%);
  }
  50% {
      transform: translateX(50%);
  }
  100% {
    transform: translateX(100%);
  }
}

 

keyframes로 다른 애니메이션 속성 만들기

애니메이션 발생 시간의 50%에 x축으로 100%까지 이동 후 애니메이션 발생 시간의 100%에 x축으로 0%까지 이동

@keyframes slideRightAndLeft {
  0% {
    transform: translateX(0%);
  }
  50% {
      transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

 

 

🔍 참고

https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes

@keyframes - CSS: Cascading Style Sheets | MDN