CSS3中的動(dòng)畫功能分為Transitions功能與Animations功能，這兩種功能都可以通過(guò)改變CSS中的屬性值來(lái)產(chǎn)生動(dòng)畫效果。
Transitions功能支持從一個(gè)屬性值平滑過(guò)渡到另一個(gè)屬性值，Animations功能支持通過(guò)關(guān)鍵幀的指定來(lái)在頁(yè)面上產(chǎn)生更復(fù)雜的動(dòng)畫效果。
Transitions功能
Transitions功能的使用方法
Transitions功能通過(guò)將元素的某個(gè)屬性從一個(gè)屬性值在指定的時(shí)間內(nèi)平滑過(guò)渡到另一個(gè)屬性值來(lái)實(shí)現(xiàn)動(dòng)畫功能，可通過(guò)transitions屬性來(lái)使用Transitions功能。
// transition屬性的使用方法
transition:property duration timing-function
其中property表示對(duì)哪個(gè)屬性進(jìn)行平滑過(guò)渡，duration表示在多長(zhǎng)時(shí)間內(nèi)完成屬性值的平滑過(guò)渡， timing-function表示通過(guò)什么方法來(lái)進(jìn)行平滑過(guò)渡。
<style type="text/css">
div{
background-color: #ffff00;
transition: background-color 1s linear;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
}
div:hover{
background-color: #00ffff;
}
</style>
<div>示例文字</div>
上面的代碼當(dāng)鼠標(biāo)指針移動(dòng)到div元素上時(shí)，在1秒內(nèi)div元素的背景色會(huì)從黃色平滑過(guò)渡到淺藍(lán)色。
在CSS3中，還有另外一種使用Transitions功能的方法，就是將transitions屬性中的三個(gè)參數(shù)改寫成transitíon-property屬性、transition-duratíon屬性、transition-timing-function屬性，這三個(gè)屬性的含義及屬性值的指定方法與transitíons屬性中的三個(gè)參數(shù)的含義及指定方法完全相同。
-webkit-transition-property:background-color;
-webkit-transition-duration:1s;
-webkit-transition-timing-tunction:linear;
-moz-transition-property:background-color;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-o-transition-property:background-color;
-o-transition-duration:18;
-o-transition-timing-function:linear;
使用Transitions功能同時(shí)平滑過(guò)渡多個(gè)屬性值
可以使用Transitions功能同時(shí)對(duì)多個(gè)屬性值進(jìn)行平滑過(guò)渡。
<style type="text/css">
div{
background-color: #ffff00;
color: #000000;
width: 300px;
transition: background-color 1s linear, color 1s linear, width 1s linear;
-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
-o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}
div:hover{
background-color: #003366;
color: #ffffff;
width: 400px;
}
</style>
<div>示例文字</div>
上面的代碼當(dāng)鼠標(biāo)指針?lè)诺?code>div元素上時(shí)，在1秒內(nèi)完成了div元素的背景色、字體色和寬度這三個(gè)屬性值的平滑過(guò)渡。
另外，可以通過(guò)改變?cè)氐奈恢脤傩灾?、?shí)現(xiàn)變形處理的transform屬性值來(lái)讓元素實(shí)現(xiàn)移動(dòng)、旋轉(zhuǎn)等動(dòng)畫效果。
<style type="text/css">
img{
position: absolute;
top: 70px;
left: 0;
transform: rotate(0deg);
transition: left 1s linear, -o-transform 1s linear;
-webkit-transform: rotate(0deg);
-webkit-transition: left 1s linear, -webkit-transform 1s linear;
-moz-transform: rotate(0deg);
-moz-transition: left 1s linear, -moz-transform 1s linear;
-o-transform: rotate(0deg);
-o-transition: left 1s linear, -o-transform 1s linear;
}
div:hover img{
position: absolute;
left: 30px;
transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
}
</style>
<div>
<img src="flower.png" />
</div>
上面的示例中有一個(gè)div元素，div元素中有一張圖片，當(dāng)鼠標(biāo)指針停留在圖像上時(shí)，圖像會(huì)向右移動(dòng)30px，并且順時(shí)針旋轉(zhuǎn)720度。
Animations功能
Animations功能的使用方法
Animations功能與Transitions功能相同， 都是通過(guò)改變?cè)氐膶傩灾祦?lái)實(shí)現(xiàn)動(dòng)畫效果的。區(qū)別在于：使用Transitions功能時(shí)只能通過(guò)指定屬性的開始值與結(jié)束值，然后在這兩個(gè)屬性值之間進(jìn)行平滑過(guò)渡的方式來(lái)實(shí)現(xiàn)動(dòng)畫效果，因此不能實(shí)現(xiàn)比較復(fù)雜的動(dòng)畫效果，而Animations則通過(guò)定義多個(gè)關(guān)鍵幀以及定義每個(gè)關(guān)鍵幀中元素的屬性值來(lái)實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫效果。
<style type="text/css">
div{
background-color: red;
}
@-webkit-keyframes mycolor{
0%{
background-color: red;
}
40%{
background-color: darkblue;
}
70%{
background-color: yellow;
}
100%{
background-color: red;
}
}
@keyframes mycolor{
0%{
background-color: red;
}
40%{
background-color: darkblue;
}
70%{
background-color: yellow;
}
100%{
background-color: red;
}
}
div:hover{
animation-name:mycolor;
animation-duration:5s;
animation-timing-function:linear;
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</style>
<div>示例文字</div>
使用Animations功能的時(shí)候，如果使用的是Safari或Chrome瀏覽器，會(huì)使用如下所示的方法來(lái)創(chuàng)建關(guān)鍵幀的集合。
@-webkit-keyframes 關(guān)鍵幀集合名{ 創(chuàng)建關(guān)鍵幀的代碼 }
關(guān)鍵幀的集合創(chuàng)建好之后， 在元素的樣式中使用該關(guān)鍵幀的集合。
div:hover{
animation-name:mycolor;
animation-duration:5s;
animation-timing-function:linear;
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
在animation-name屬性中指定關(guān)鍵幀集合的名稱；在animation-duratiion屬性中指定完成整個(gè)動(dòng)畫所花費(fèi)的時(shí)間；在animation-timing-function屬性中指定實(shí)現(xiàn)動(dòng)畫的方法。
實(shí)現(xiàn)多個(gè)屬性值同時(shí)改變的動(dòng)畫
如呆要想實(shí)現(xiàn)讓多個(gè)屬性值同時(shí)變化的動(dòng)畫， 只需在各關(guān)鍵幀中同時(shí)指定這些屬性值就可以了。
<style type="text/css">
div{
position: absolute;
background-color: yellow;
top:100px;
width:500px;
}
@-webkit-keyframes mycolor{
0%{
background-color: red;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
40%{
background-color: darkblue;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
70%{
background-color: yellow;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
100%{
background-color: red;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
@keyframes mycolor{
0%{
background-color: red;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
40%{
background-color: darkblue;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
70%{
background-color: yellow;
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
}
100%{
background-color: red;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
div:hover{
animation-name: mycolor;
animation-duration: 5s;
animation-timing-function: linear;
-webkit-animation-name: mycolor;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
}
</style>
<div>示例文字</div>
animation的屬性
| 屬性 | 描述 | 描述 |
|---|---|---|
| animation | 所有動(dòng)畫屬性的簡(jiǎn)寫屬性 | |
| animation-name | 指定要綁定到選擇器的關(guān)鍵幀的名稱 | none |
| animation-duration | 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒 | 默認(rèn)0 |
| animation-timing-function | 指定動(dòng)畫將如何完成一個(gè)周期 | 默認(rèn)"ease" |
| animation-delay | 定義動(dòng)畫開始前等待的時(shí)間 | 可選，默認(rèn)0，以秒或毫秒計(jì) |
| animation-iteration-count | 定義動(dòng)畫應(yīng)該播放多少次 | infinite：指定動(dòng)畫播放無(wú)限次 默認(rèn)1 |
| animation-direction | 規(guī)定動(dòng)畫是否在下一周期逆向地播放 | normal：默認(rèn)值，動(dòng)畫按正常播放 reverse：動(dòng)畫反向播放 alternate：動(dòng)畫在奇數(shù)次正向播放，在偶數(shù)次反向播放 alternate-reverse：動(dòng)畫在奇數(shù)次反向播放，在偶數(shù)次正向播放 |
| animation-fill-mode | 規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式 | 默認(rèn)值none |
| animation-play-state | 指定動(dòng)畫是否正在運(yùn)行或已暫停 | paused：指定暫停動(dòng)畫 running：默認(rèn)值，指定正在運(yùn)行的動(dòng)畫 |
animation簡(jiǎn)寫形式：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-fill-mode的取值
| 值 | 描述 |
|---|---|
| none | 默認(rèn)值。動(dòng)畫在動(dòng)畫執(zhí)行之前和之后不會(huì)應(yīng)用任何樣式到目標(biāo)元素 |
| forwards | 在動(dòng)畫結(jié)束后（由 animation-iteration-count 決定），動(dòng)畫將應(yīng)用該屬性值 |
| backwards | 動(dòng)畫將應(yīng)用在 animation-delay 定義期間啟動(dòng)動(dòng)畫的第一次迭代的關(guān)鍵幀中定義的屬性值。這些都是 from 關(guān)鍵幀中的值（當(dāng) animation-direction 為 "normal" 或 "alternate" 時(shí)）或 to 關(guān)鍵幀中的值（當(dāng) animation-direction 為 "reverse" 或 "alternate-reverse" 時(shí)） |
| both | 動(dòng)畫遵循forwards和backwards的規(guī)則。也就是說(shuō)，動(dòng)畫會(huì)在兩個(gè)方向上擴(kuò)展動(dòng)畫屬性 |
實(shí)現(xiàn)動(dòng)畫的方法
| 方法 | 屬性值的變化速度 |
|---|---|
| linear | 在動(dòng)畫開始時(shí)到結(jié)束時(shí)以同樣速度進(jìn)行改變 |
| ease-in | 動(dòng)畫開始時(shí)速度很慢，然后速度沿曲線值進(jìn)行加快 |
| ease-out | 動(dòng)畫開始時(shí)速度很快，然后速度沿曲線值進(jìn)行放慢 |
| ease | 動(dòng)畫開始時(shí)速度很慢，然后速度沿曲線值進(jìn)行加快，然后再沿曲線值放慢 |
| ease-in-out | 動(dòng)畫開始時(shí)速度很慢，然后速度沿曲線值進(jìn)行加快，然后再沿曲線值放慢 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數(shù)中自己的值?？赡艿闹凳菑?0 到 1 的數(shù)值 |
