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