예
요소가 점진적으로 200 픽셀 아래로 이동합니다 :
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
@keyframes 규칙의 애니메이션 코드를 지정한다.
애니메이션은 점차 다른 CSS 스타일 중 하나 세트에서 변화에 의해 생성된다.
애니메이션 동안 CSS 스타일 많은 시간의 설정을 변경할 수 있습니다.
스타일 변화 백분율 또는 키워드 일어날 때 지정 "from" 과 "to" 0 %와 100 % 동일하다. 애니메이션이 완료 될 때 0 % 애니메이션의 시작 100 %이다.
팁 : 최상의 브라우저 지원을 위해, 당신은 항상 0 %와 100 % 선택기를 모두 정의해야합니다.
Note: 셀렉터 애니메이션 바인딩 또한 애니메이션의 모양을 제어하는 애니메이션 속성을 사용하여.
브라우저 지원
표의 수치는 완전히 규칙을 지원하는 제 브라우저 버전을 지정한다.
숫자는 -webkit-, -moz- 다음 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 재산 | |||||
|---|---|---|---|---|---|
| @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 구문
@keyframesanimationname {keyframes-selector {css-styles;}}속성 값
| 값 | 기술 |
|---|---|
| animationname | 필요합니다. 애니메이션의 이름을 정의합니다. |
| keyframes-selector | 필요합니다. 애니메이션 길이의 백분율. 유효한 값 : 0 ~ 100 % Note: 당신은 하나의 애니메이션에 많은 키 프레임-선택기를 가질 수 있습니다. |
| css-styles | 필요합니다. 하나 이상의 법적 CSS 스타일의 호텔 |
더 예
예
하나의 애니메이션에 많은 키 프레임 선택기를 추가합니다 :
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
»그것을 자신을 시도 예
하나의 애니메이션에 많은 CSS 스타일을 변경합니다 :
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
»그것을 자신을 시도 예
많은 CSS 스타일에 많은 키 프레임 선택기 :
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
»그것을 자신을 시도 관련 페이지
CSS3 튜토리얼 : CSS3 애니메이션