網(wǎng)站前端制作之CSS常用動(dòng)畫(huà)效果

• 什么是CSS動(dòng)畫(huà)？

　　您可以隨意更改任意數(shù)量的CSS屬性。

　　如需使用CSS動(dòng)畫(huà)，您必須首先為動(dòng)畫(huà)指定一些關(guān)鍵幀。

　　關(guān)鍵幀包含元素在特定時(shí)間所擁有的樣式。

　　配置動(dòng)畫(huà)創(chuàng)建動(dòng)畫(huà)序列，需要使用animation屬性或其子屬性，該屬性允許配置動(dòng)畫(huà)時(shí)間、時(shí)長(zhǎng)以及其他動(dòng)畫(huà)細(xì)節(jié)，但該屬性不能配置動(dòng)畫(huà)的實(shí)際表現(xiàn)，動(dòng)畫(huà)的實(shí)際表現(xiàn)是由@keyframes規(guī)則實(shí)現(xiàn)，具體情況參見(jiàn)使用keyframes定義動(dòng)畫(huà)序列小節(jié)部分。animation的子屬性有：animation-delay...

　　使用keyframes定義動(dòng)畫(huà)序列一旦完成動(dòng)畫(huà)的時(shí)間設(shè)置，接下來(lái)就需要定義動(dòng)畫(huà)的表現(xiàn)。通過(guò)使用@keyframes建立兩個(gè)或兩個(gè)以上關(guān)鍵幀來(lái)實(shí)現(xiàn)。首先編寫(xiě)我們想要的動(dòng)畫(huà)

• @keyframes規(guī)則

• 優(yōu)點(diǎn)

　　CSS3動(dòng)畫(huà)的代碼相對(duì)簡(jiǎn)單。CSS缺點(diǎn)：

　　動(dòng)畫(huà)控制上不夠靈活。

　　兼容性不佳

　　部分動(dòng)畫(huà)無(wú)法實(shí)現(xiàn)（視差效果、滾動(dòng)動(dòng)畫(huà)）

• 語(yǔ)法說(shuō)明如下：

• From....to
• 百分比模式%

　　from{background-color：red;}

　　to{background-color：yellow;}

　　}

　　上下效果同等。

　　@keyframesdot{

　　0%{background-color：red;}

　　100%{background-color：yellow;}

　　}

　　接下來(lái)編寫(xiě)完動(dòng)畫(huà)，需要使用該動(dòng)畫(huà)。

　　animation-name：設(shè)置需要綁定到元素的動(dòng)畫(huà)名稱(chēng)；

　　animation-duration：設(shè)置完成動(dòng)畫(huà)所需要花費(fèi)的時(shí)間，單位為秒或毫秒，默認(rèn)為0；

　　animation-timing-function：設(shè)置動(dòng)畫(huà)的速度曲線(xiàn)，默認(rèn)為ease；

　　animation-fill-mode：設(shè)置當(dāng)動(dòng)畫(huà)不播放時(shí)（動(dòng)畫(huà)播放完或延遲播放時(shí)）的狀態(tài)；

　　animation-delay：設(shè)置動(dòng)畫(huà)開(kāi)始之前的延遲時(shí)間，默認(rèn)為0；

　　animation-iteration-count：設(shè)置動(dòng)畫(huà)被播放的次數(shù)，默認(rèn)為1；

　　animation-direction：設(shè)置是否在下一周期逆向播放動(dòng)畫(huà)，默認(rèn)為normal；

　　animation-play-state：設(shè)置動(dòng)畫(huà)是正在運(yùn)行還是暫停，默認(rèn)是running；

　　animation：所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性。

• CSS的形體變化TransformAPI只能轉(zhuǎn)換由盒模型定位的元素。

• Translate(移動(dòng))
• Scale(縮放)
• Rotate(旋轉(zhuǎn))
• Skew(傾斜)