CSS3 ????? ????? ??
CSS3? ????? ?? ???? ?? ??? ??:
?????? ???? "?????"? ?????. ??? ????? ??? ??? ????? ??? ???? ? ?????. flash? js? ???? ??? ?????? ?? ???? ???? ????? ?? ??? ??? ? ???? ? ??? ????? ?? ?????.
1. ?? ??:
?? ?? ?? ?, CSS3? @keyframes ???? ?? ??? ??? ?? ???? ?? ????.
?? ??? ???? ????? ?? ??? ?? ? ???, ? ???? ??? ????. ?, ?? ??? ?? ???? ?? ??? ???? ??? ??? ????? ??? ? ??? ??? ? ???, ????? ?? @keyframes? ??? ????? ??? ???? ????? ?? ????? ? ??? ??? ? ????. ? ??? ???, ?? ? ?? ??? ?? ?? ?????.
?? ??? ???? CSS3? ?? ??? ?? ??? ??? ?????.
?? ??:
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ] || [animation-play-state] || [animation-fill-mode]]*
???? ??:
1.animation-name: ? ??? ??? ???? ????? ??? ?????. ? ??? @keyframes? ?????.
2.animation-duration: ? ??? ?????? ?? ??? ???? ? ?????.
3.animation-timing-function: ?????? ?? ??? ???? ? ?????.
4.animation-delay: ????? ?? ????? ?? ??? ???? ? ?????.
5.animation-iteration-count: ?????? ?? ??? ???? ? ?????.
6.animation-direction: ????? ???? ??? ??? ???? ??? ???? ? ?????.
7.animation-play-state: ?????? ?? ??? ?? ?????? ?????.
8.animation-fill-mode: ?? ????? ?? ??? ??? ?????.
?? ??:
1. ?? ?? ? ??? ???? ?? ??? ?????.
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 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{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>? ??? div ??? ?? ?? ?? ???? 0px?? 200px?? ??? ??????? ? ??, ??? ?? ??? ? ??? ??? ??? ??? ? ????.
<!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>? ??? ? ?? ???? ? ?????. ??? ?? ????? ?????.
1. ?? ?????? ? ??? 4?? ?????.
2.@keyframes? ?????? 4??? ?????. 0%-25% ??? ?? ?? ?? 0?? 100px? ???? ???? ????? ???, 25%-50%, 50%-75%? ?????. 75%~100%? ???????.
3. ?? ?? ? ??? ?? ??? ?? ? ????.
<!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:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-webkit-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-moz-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-o-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-ms-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>? ??? div? ?? ?? ????? ?? ??? ??? ???? ? ?? ?????.
