CSS3의 @keyframes 사용법에 대한 자세한 설명:
이 속성은 애니메이션 속성과 밀접하게 관련되어 있습니다. 애니메이션 속성에 대해서는 CSS3의 애니메이션 속성 사용법에 대한 자세한 설명 장을 참조하세요.
1. 기본 지식:
키프레임을 중국어로 번역하면 "키프레임"을 의미합니다. 물론 플래시를 모르더라도 문제가 되지 않습니다.
전환 애니메이션 효과는 전환 속성을 사용하여 얻을 수도 있지만 애니메이션 프로세스를 더 정확하게 제어할 수 없기 때문에 약간 거칠습니다. 예를 들어 특정 시간 내에 특정 속성의 전환만 전체적으로 제어할 수 있습니다. 애니메이션 속성을 사용할 수 있지만 @keyframes는 지정된 기간 내에서 애니메이션을 더 세밀하게 나눕니다.
문법 구조:
@keyframes animationname {keyframes-selector {css-styles;}}매개변수 분석:
1.animationname: 애니메이션의 이름을 선언합니다.
2.keyframes-selector: 애니메이션 기간을 나누는 데 사용되며, 백분율 형식을 사용하거나 "from" 및 "to" 형식을 사용할 수 있습니다.
"from"과 "to"의 형태는 0%와 100%에 해당합니다.
항상 백분율 형식을 사용하는 것이 좋습니다.
2. 코드 예:
예 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite alternate;
-webkit-animation:theanimation 5s infinite alternate ;
-moz-animation:theanimation 5s infinite alternate ;
-o-animation:theanimation 5s infinite alternate ;
-ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-o-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-ms-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드는 간단한 애니메이션을 구현합니다. 다음은 간단한 분석입니다.
1.
2. @keyframes에서 선언한 애니메이션 이름은 애니메이션과 함께 사용해야 합니다.
3. from to는 0%~100%에 해당하므로 5초 이내에 한 가지 작업을 완료해야 한다고 규정합니다.
예제 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 4s infinite alternate;
-webkit-animation:theanimation 4s infinite alternate ;
-moz-animation:theanimation 4s infinite alternate ;
-o-animation:theanimation 4s infinite alternate ;
-ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
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;}
}
@-moz-keyframes theanimation{
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 theanimation{
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;}
}
@-o-keyframes theanimation{
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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>위 코드에서는 애니메이션 지속 시간을 백분율로 나누어 지정된 간격 내에서 지정된 작업을 수행합니다.
다음 섹션