CSS3 動(dòng)畫(huà)animation屬性
CSS3的animation屬性用法詳解:
animation翻譯成中文具有「動(dòng)畫(huà)」的意思，確實(shí)如此，animation屬性就是用來(lái)定義元素的動(dòng)畫(huà)效果，當(dāng)然和使用flash或js製作的動(dòng)畫(huà)相比要粗糙一些，但是能夠滿(mǎn)足我們基本的動(dòng)畫(huà)需求，所以掌握此屬性也是大有必要的。
一.基本知識(shí):
在閱讀下面的文章之前，建議事先參閱CSS3的@keyframes用法詳解一章節(jié)。
使用transition屬性可以實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡效果，但此屬性有個(gè)缺點(diǎn)，那就是從初始值到終止值的過(guò)渡過(guò)程可控性很差，也就是說(shuō)不能夠更為細(xì)緻的控制動(dòng)畫(huà)效果，而animation屬性則可以結(jié)合@keyframes定義的動(dòng)畫(huà)名稱(chēng)，更為細(xì)緻的控制動(dòng)畫(huà)過(guò)渡過(guò)程。此屬性和border、background等屬性一樣是複合屬性。
關(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ī)定元素所套用的動(dòng)畫(huà)名稱(chēng)，此名稱(chēng)是由@keyframes定義的。
2.animation-duration:此屬性用於規(guī)定動(dòng)畫(huà)的持續(xù)時(shí)間。
3.animation-timing-function:用於規(guī)定動(dòng)畫(huà)的過(guò)渡類(lèi)型。
4.animation-delay:用來(lái)規(guī)定動(dòng)畫(huà)的開(kāi)始執(zhí)行的延遲時(shí)間。
5.animation-iteration-count:用來(lái)規(guī)定動(dòng)畫(huà)的重複次數(shù)。
6.animation-direction:用來(lái)規(guī)定動(dòng)畫(huà)循環(huán)中是否會(huì)反向運(yùn)動(dòng)。
7.animation-play-state:規(guī)定動(dòng)畫(huà)是否正在運(yùn)作或暫停。
8.animation-fill-mode:規(guī)定物件動(dòng)畫(huà)時(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)畫(huà)過(guò)渡，並且能夠無(wú)限次的重複循環(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è)要複雜一些了，下面介紹一下它的運(yùn)作過(guò)程。
1.整個(gè)動(dòng)畫(huà)的總時(shí)間設(shè)定為4秒。
2.@keyframes定義了動(dòng)畫(huà)的四個(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)畫(huà)屬性，中間用逗號(hào)分隔。
