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.php.cn/" />
<title>php中文网</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.php.cn/" />
<title>php中文网</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>在上述程式碼中，使用百分比形式將動畫時長進行了劃分，規定了在指定區間內做指定的事情。
下一節