CSS3的@keyframes用法詳解:
此屬性與animation屬性是密切相關的，關於animation屬性可以參閱CSS3的animation屬性用法詳解一章節。
一.基本知識:
keyframes翻譯成中文，是"關鍵幀"的意思，如果用過flash應該對這個比較好理解，當然不會flash也沒有任何問題。
使用transition屬性也能夠實現過渡動畫效果，但是略顯粗糙，因為不能夠更為精細的控制動畫過程，比如只能夠在指定的時間段內總體控制某一屬性的過渡，而animation屬性則可以利用@keyframes將指定時間段內的動畫划分的更為精細一些。
語法結構:
@keyframes animationname {keyframes-selector {css-styles;}}
參數解析:
1.animationname:聲明動畫的名稱。
2.keyframes-selector:用來划分動畫的時長，可以使用百分比形式，也可以使用 "from" 和 "to"的形式。
"from" 和 "to"的形式等價於 0% 和 100%。
建議始終使用百分比形式。
二.代碼實例:
實例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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.使用@keyframes定義了一個名為theanimation的動畫。
2.@keyframes聲明的動畫名稱要和animation配合使用。
3.from to等價於0%-100%，所以就是規定5s內做了一件事情。
實例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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>
在以上代碼中，使用百分比形式將動畫時長進行了划分，規定了在指定區間內做指定的事情。