CSS @keyframes 규칙
예시
요소를 점진적으로 200px 아래로 이동합니다.
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
@keyframes
규칙은 애니메이션 코드를 지정합니다 .
애니메이션은 한 CSS 스타일 세트에서 다른 세트로 점진적으로 변경하여 생성됩니다.
애니메이션 중에 CSS 스타일 세트를 여러 번 변경할 수 있습니다.
스타일 변경이 퍼센트로 발생하는 시점을 지정하거나 0% 및 100%와 동일한 "from" 및 "to" 키워드를 사용하여 지정합니다. 0%는 애니메이션의 시작이고 100%는 애니메이션이 완료된 시점입니다.
팁: 최상의 브라우저 지원을 위해 항상 0% 및 100% 선택기를 모두 정의해야 합니다.
참고: 애니메이션 속성을 사용하여 애니메이션의 모양을 제어하고 애니메이션을 선택기에 바인딩할 수도 있습니다.
참고: !important 규칙은 키프레임에서 무시됩니다(이 페이지의 마지막 예 참조).
브라우저 지원
표의 숫자는 규칙을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
@keyframes | 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- |
CSS 구문
@keyframes animationname {keyframes-selector {css-styles;}}
속성 값
Value | Description |
---|---|
animationname | Required. Defines the name of the animation. |
keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
css-styles | Required. One or more legal CSS style properties |
더 많은 예
예시
하나의 애니메이션에 여러 키프레임 선택기를 추가합니다.
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
예시
하나의 애니메이션에서 여러 CSS 스타일 변경:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
예시
많은 CSS 스타일을 가진 많은 키프레임 선택기:
@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;}
}
예시
참고: !important 규칙은 키프레임에서 무시됩니다.
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
관련 페이지
CSS 튜토리얼: CSS 애니메이션