CSS3의 새로운 애니메이션 속성“@keyframes”은 문자 그대로의 의미인 키프레임에서 볼 수 있으며 이는 Flash의 의미와 일치합니다. CSS3를 사용하여 애니메이션 효과를 만드는 원리는 Flash와 동일합니다. 키 프레임에서 상태 효과를 정의하고 CSS3를 사용하여 애니메이션 효과를 구동해야 합니다.
구문
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 필수입니다. 애니메이션의 이름을 정의합니다.
키프레임 선택기
필수입니다. 애니메이션 지속 시간의 백분율입니다.
적용되는 값:
0-100%
from(0%와 동일)
to(100%와 동일)
css-styles 필수입니다. 하나 이상의 합법적인 CSS 스타일 속성입니다.
정의 및 사용법
@keyframes 규칙을 사용하면 애니메이션을 만들 수 있습니다.
애니메이션은 한 CSS 스타일 세트를 다른 CSS 스타일 세트로 점진적으로 변경하여 만들어집니다.
애니메이션 중에 이 CSS 스타일 세트를 여러 번 변경할 수 있습니다.
변경이 발생하는 시간을 백분율로 지정하거나 0%와 100%에 해당하는 'from' 및 'to' 키워드를 통해 지정합니다.
0%는 애니메이션 시작 시간이고, 100%는 애니메이션 종료 시간입니다.
최상의 브라우저 지원을 위해서는 항상 0% 및 100% 선택자를 정의해야 합니다.
참고: 애니메이션 속성을 사용하여 애니메이션 모양을 제어하고 애니메이션을 선택기에 바인딩하세요.
브라우저 지원
현재 브라우저는 @keyframes 규칙을 지원하지 않습니다.
Firefox는 대체 @-moz-keyframes 규칙을 지원합니다.
Opera는 대체 @-o-keyframes 규칙을 지원합니다.
Safari와 Chrome은 대체 @-webkit-keyframes 규칙을 지원합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: #ff72cc;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>CSS3 애니메이션
@keyframes에서 애니메이션을 생성할 때 이를 선택기에 바인딩하세요. 그렇지 않으면 애니메이션이 효과가 없습니다.
두 개 이상의 CSS3 애니메이션 속성이 선택기에 바인딩되도록 지정:
애니메이션 이름 지정
애니메이션 기간 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-moz-keyframes mymove /* Firefox */
{
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;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>의 CSS3 애니메이션 속성다음 표에는 @keyframes 규칙과 모든 애니메이션 속성이 나열되어 있습니다.
속성 @keyframes는 애니메이션을 지정합니다. 3
animation-name @keyframes 애니메이션의 이름을 지정합니다. 3
animation-duration 애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0입니다. 3
animation-timing-function 애니메이션의 속도 곡선을 지정합니다. 기본값은 "쉽게"입니다. 3
animation-delay 애니메이션이 시작되는 시기를 지정합니다. 기본값은 0입니다. 3
animation-iteration-count 애니메이션이 재생되는 횟수를 지정합니다. 기본값은 1입니다. 3
animation-direction 다음 주기에서 애니메이션을 역방향으로 재생할지 여부를 지정합니다. 기본값은 "정상"입니다. 3
animation-play-state 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. 기본값은 "실행 중"입니다. 3
아아앙