CSS3的animation屬性用法詳解:
animation翻譯成中文具有「動畫」的意思，確實如此，animation屬性就是用來定義元素的動畫效果，當然和使用flash或js製作的動畫相比要粗糙一些，但是能夠滿足我們基本的動畫需求，所以掌握此屬性也是大有必要的。
一.基本知識:
在閱讀下面的文章之前，建議事先參閱CSS3的@keyframes用法詳解一章節。
使用transition屬性可以實現動畫過渡效果，但此屬性有個缺點，那就是從初始值到終止值的過渡過程可控性很差，也就是說不能夠更為細緻的控制動畫效果，而animation屬性則可以結合@keyframes定義的動畫名稱，更為細緻的控制動畫過渡過程。此屬性和border、background等屬性一樣是複合屬性。
關於transition屬性可以參閱CSS3的transition屬性詳解一章節。
語法結構:
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ] || [animation-play-state] || [animation-fill-mode]]*
參數解析:
1.animation-name:此屬性規定元素所套用的動畫名稱，此名稱是由@keyframes定義的。
2.animation-duration:此屬性用於規定動畫的持續時間。
3.animation-timing-function:用於規定動畫的過渡類型。
4.animation-delay:用來規定動畫的開始執行的延遲時間。
5.animation-iteration-count:用來規定動畫的重複次數。
6.animation-direction:用來規定動畫循環中是否會反向運動。
7.animation-play-state:規定動畫是否正在運作或暫停。
8.animation-fill-mode:規定物件動畫時間之外的狀態。
特別說明:
1.如果提供多組屬性值，以逗號進行分隔。
2.對應的腳本特性為animation。
程式碼實例:
<!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{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上程式碼可以設定div元素的left屬性值從0px到200px進行動畫過渡，並且能夠無限次的重複循環，且能夠進行反向運動。
<!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>上面的程式碼就比第一個要複雜一些了，下面介紹一下它的運作過程。
1.整個動畫的總時間設定為4秒。
2.@keyframes定義了動畫的四個階段，0%-25%時間段將left屬性值從0設定為100px，背景色從red轉換為blue，25%-50%、50%-75 %和75%-100%也是同樣的道理。
3.並且能夠實現無限循環和反向運動效果。
<!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:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-webkit-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-moz-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-o-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-ms-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上程式碼一次為div設定了多組動畫屬性，中間用逗號分隔。
下一節