CSS @keyframes 규칙

CSS에서 @keyframes 규칙을 사용하여 애니메이션을 생성할 수 있습니다. 애니메이션은 하나의 CSS 스타일에서 다른 CSS 스타일로 점진적으로 변화시키는 것을 통해 생성됩니다. 애니메이션 중에는 CSS 스타일 설정을 여러 번 변경할 수 있으며, 지정된 변화가 발생할 때 0％부터 %를 사용하거나 'from'과 'to' 키워드를 사용합니다.100％는 동일합니다. 0％는 애니메이션의 시작입니다.100％는 애니메이션이 완료된 시점입니다. 최적의 브라우저 지원을 위해 항상 0％로 정의해야 합니다.100％의 선택자。

@keyframes规则是css3@keyframes 규칙은 CSS입니다 9및 이전 버전의 브라우저에서 새로운 규칙이 추가되었습니다. 현재 주요 브라우저는 이 규칙을 지원하지만 (브라우저에 대한 전구를 추가), IE와 호환되지 않습니다.

@keyframes 규칙의 사용 문법

이 규칙의 문법은 다음과 같습니다：

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

속성 값 설명

animationname：animation의 이름을 정의합니다；

keyframes-selector：애니메이션 지속 시간의 백분율, 가능한 값: 0-100%、from (0%와 같습니다) 또는 to (0%와 같습니다)100%와 같습니다). 하나의 애니메이션 keyframes를 사용할 수 있습니다.-선택자；

css-styles ： 하나나 여러 개의 합법적인 CSS 스타일 속성；

아래 예제는 실제 @keyframes 규칙을 보여줍니다.

　　　　　　.box　{
　　　　　　　　　　width:　50px;
　　　　　　　　　　height:　50px;
　　　　　　　　　　background:　red;
　　　　　　　　　　position:　relative;
　　　　　　　　　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　　　　-webkit-animation-name:　moveit;
　　　　　　　　　　-webkit-animation-duration:　2s;
　　　　　　　　　　
　　　　　　　　　　animation-name:　moveit;
　　　　　　　　　　animation-duration:　2s;
　　　　　　}
　　　　　　　
　　　　　　/*　Chrome,　Safari,　Opera　*/
　　　　　　@-webkit-keyframes　moveit　{
　　　　　　　　　　from　{left:　0;}
　　　　　　　　　　to　{left:　50%;}
　　　　　　}
　　　　　　　
　　　　　　
　　　　　　@keyframes　moveit　{
　　　　　　　　　　from　{left:　0;}
　　　　　　　　　　to　{left:　50%;}
　　　　　　}

파라미터

아래 표는 이 규칙의 파라미터를 설명합니다.

브라우저 호환성

@keyframes 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 규칙을 지원합니다.

더 읽기

다음 튜토리얼을 참조하세요:CSS 미디어 타입。