CSS3 ????? ???? ??
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://ipnx.cn/" />
<title>php中文網(wǎng)</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://ipnx.cn/" />
<title>php中文網(wǎng)</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>? ????? ????? ?? ??? ???? ??? ??? ?? ??? ??? ??? ?????.
