CSS3 규칙을 @keyframes
예
확인 div 요소는 점진적으로 200 픽셀 이동 :
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
»시도
더 많은 예제는이 페이지의 하단에.
브라우저 지원
| 属性 | |||||
|---|---|---|---|---|---|
| @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- |
태그 정의 및 지침
@keyframes 규칙을 사용하면 애니메이션을 만들 수 있습니다.
점차 다른 하나의 CSS 스타일의 설정을 변경하여 애니메이션 작성.
애니메이션 동안, 당신은 시간을 설정 CSS 스타일을 변경할 수 있습니다.
지정된 %의 변화, 또는 키워드 "에서"및 "에"이 (가) 0 % ~ 100 % 동일 할 때 사용가 발생합니다.
애니메이션이 완료 될 때 0 % 애니메이션의 처음 100 %이다.
최적의 브라우저 지원을 위해, 당신은 항상 0 % 선택기의 100 %로 정의되어야한다.
참고 : 바인드 애니메이션을 선택하는 데 사용되는 애니메이션의 모양을 제어 할 애니메이션속성을 사용합니다. .
문법
@keyframesanimationname {keyframes-selector {css-styles;}}
| 값 | 설명 |
|---|---|
| animationname | 필요합니다. 애니메이션 이름을 정의합니다. |
| 키 프레임 선택기 | 필요합니다. 애니메이션의 비율 기간. 법률 값 : 0 ~ 100 % 참고 : 애니메이션 키 프레임-선택기를 사용할 수 있습니다. |
| CSS - 스타일 | 필요합니다. 하나 이상의 적법한 CSS 스타일 속성 |
온라인 예
예
키 프레임 선택의 대부분은 동영상을 추가합니다 :
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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;}
}
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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 애니메이션