CSS3動畫keyframes介紹
CSS3的@keyframes用法詳解:
此屬性與animation屬性是密切相關(guān)的，關(guān)于animation屬性可以參閱CSS3的animation屬性用法詳解一章節(jié)。
一.基本知識:
keyframes翻譯成中文，是"關(guān)鍵幀"的意思，如果用過flash應(yīng)該對這個比較好理解，當(dāng)然不會flash也沒有任何問題。
使用transition屬性也能夠?qū)崿F(xiàn)過渡動畫效果，但是略顯粗糙，因為不能夠更為精細的控制動畫過程，比如只能夠在指定的時間段內(nèi)總體控制某一屬性的過渡，而animation屬性則可以利用@keyframes將指定時間段內(nèi)的動畫劃分的更為精細一些。
語法結(jié)構(gòu):
@keyframes animationname {keyframes-selector {css-styles;}}參數(shù)解析:
1.animationname:聲明動畫的名稱。
2.keyframes-selector:用來劃分動畫的時長，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等價于 0% 和 100%。
建議始終使用百分比形式。
二.代碼實例:
實例一:
<!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>上面代碼實現(xiàn)了簡單的動畫，下面簡單做一下分析:
1.使用@keyframes定義了一個名為theanimation的動畫。
2.@keyframes聲明的動畫名稱要和animation配合使用。
3.from to等價于0%-100%，所以就是規(guī)定5s內(nèi)做了一件事情。
實例二:
<!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>在以上代碼中，使用百分比形式將動畫時長進行了劃分，規(guī)定了在指定區(qū)間內(nèi)做指定的事情。
