CSS3 ????? ??
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中文網(wǎng)(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中文網(wǎng)(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?
???
