CSS3 動(dòng)畫animation屬性
CSS3的animation屬性用法詳解:
animation翻譯成中文具有“動(dòng)畫”的意思，確實(shí)如此，animation屬性就是用來(lái)定義元素的動(dòng)畫效果，當(dāng)然和使用flash或者js制作的動(dòng)畫相比要粗糙一些，但是能夠滿足我們基本的動(dòng)畫需求，所以掌握此屬性也是大有必要的。
一.基本知識(shí):
在閱讀下面的文章之前，建議事先參閱CSS3的@keyframes用法詳解一章節(jié)。
使用transition屬性可以實(shí)現(xiàn)動(dòng)畫過(guò)渡效果，但是此屬性有個(gè)缺點(diǎn)，那就是從初始值到終止值的過(guò)渡過(guò)程可控性很差，也就是說(shuō)不能夠更為細(xì)致的控制動(dòng)畫效果，而animation屬性則可以結(jié)合@keyframes定義的動(dòng)畫名稱，更為細(xì)致的控制動(dòng)畫過(guò)渡過(guò)程。此屬性和border、background等屬性一樣是復(fù)合屬性。
關(guān)于transition屬性可以參閱CSS3的transition屬性詳解一章節(jié)。
語(yǔ)法結(jié)構(gòu):
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]]*
參數(shù)解析:
1.animation-name:此屬性規(guī)定元素所應(yīng)用的動(dòng)畫名稱，此名稱是由@keyframes定義的。
2.animation-duration:此屬性用于規(guī)定動(dòng)畫的持續(xù)時(shí)間。
3.animation-timing-function:用于規(guī)定動(dòng)畫的過(guò)渡類型。
4.animation-delay:用于規(guī)定動(dòng)畫的開始執(zhí)行的延遲時(shí)間。
5.animation-iteration-count:用于規(guī)定動(dòng)畫的重復(fù)次數(shù)。
6.animation-direction:用于規(guī)定動(dòng)畫循環(huán)中是否會(huì)反向運(yùn)動(dòng)。
7.animation-play-state:規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。
8.animation-fill-mode:規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。
特別說(shuō)明:
1.如果提供多組屬性值，以逗號(hào)進(jìn)行分隔。
2.對(duì)應(yīng)的腳本特性為animation。
代碼實(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{
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>以上代碼可以設(shè)置div元素的left屬性值從0px到200px進(jìn)行動(dòng)畫過(guò)渡，并且能夠無(wú)限次的重復(fù)循環(huán)，且能夠進(jìn)行反向運(yùn)動(dòng)。
<!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>上面的代碼就比第一個(gè)要復(fù)雜一些了，下面介紹一下它的運(yùn)行過(guò)程。
1.整個(gè)動(dòng)畫的總時(shí)間設(shè)置為4秒。
2.@keyframes定義了動(dòng)畫的四個(gè)階段，0%-25%時(shí)間段將left屬性值從0設(shè)置為100px，背景色從red轉(zhuǎn)換為blue，25%-50%、50%-75%和75%-100%也是同樣的道理。
3.并且能夠?qū)崿F(xiàn)無(wú)限循環(huán)和反向運(yùn)動(dòng)效果。
<!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: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設(shè)置了多組動(dòng)畫屬性，中間用逗號(hào)分隔。
