CSS @keyframes 규칙

정의와 사용법

@keyframes 규칙을 통해 애니메이션을 생성할 수 있습니다.

애니메이션을 생성하는 원리는, 한 세트의 CSS 스타일을 다른 스타일로 점진적으로 변환하는 것입니다.

애니메이션 과정에서 여러 번 이 CSS 스타일을 변경할 수 있습니다.

변화가 발생하는 시간을 백분율로 정의하거나 'from'과 'to' 키워드를 사용하여 0%와 100%와 동일합니다.

0%는 애니메이션의 시작 시간이며, 100%는 애니메이션의 종료 시간입니다.

힌트:최상의 브라우저 지원을 위해 항상 0%와 100% 선택자를 정의해야 합니다.

힌트:애니메이션의 외관을 제어하고 애니메이션을 선택자와 바인딩하려면 애니메이션 속성을 사용하십시오.

주의:!important 규칙은 키 프레임에서 무시됩니다(이 페이지의 마지막 예제를 참조하십시오).

참고 사항:

CSS3 강의:CSS3 애니메이션

예시

예제 1

div 요소를 일정하게 아래로 이동시키기:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

직접 시도해 보세요

예제 2

한 개의 애니메이션에 여러 개의 keyframe 선택자를 추가:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

직접 시도해 보세요

예제 3

한 개의 애니메이션에서 여러 개의 CSS 스타일을 변경:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

직접 시도해 보세요

예제 4

여러 개의 CSS 스타일을 가진 여러 개의 keyframe 선택자:

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

직접 시도해 보세요

예제 5

주의:!important 규칙은 키 프레임에서 무시됨:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* 무시됨 */
  to   {top: 200px;}
}

직접 시도해 보세요

CSS 문법

@keyframes animationname {keyframes-selector {css-styles;}}

속성 값

값 설명
animationname 필수. 애니메이션의 이름을 정의.
keyframes-selector

필수. 애니메이션 시간의 퍼센트.

합법적인 값:

  • 0-100%
  • from(0%와 동일)
  • to(100%와 동일)
css-styles 필수. 하나나 여러 개의 합법적인 CSS 스타일 속성.

브라우저 지원

크롬 IE / 엣지 파이어폭스 사파리 오페라
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-