CSS @keyframes (키 프레임) 란?

@keyframes 란?

CSS At-rules 의 일종이다. 애니메이션의 시퀀스를 정의할 수 있다. transitions 으로 정하는 것보다 더 세부적으로 제어가 가능하다.

예제

from, to 사용

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

퍼센티지 사용

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

주의사항

• @keyframes 내부의 !important 키워드는 무시된다.