動(dòng)畫(huà)使元素逐漸從一種樣式變?yōu)榱硪环N樣式。
您可以隨意更改任意數(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à)
要?jiǎng)?chuàng)建 CSS 動(dòng)畫(huà)，您首先需要了解 @keyframes 規(guī)則，@keyframes 規(guī)則用來(lái)定義動(dòng)畫(huà)各個(gè)階段的屬性值
瀏覽器會(huì)對(duì)CSS3動(dòng)畫(huà)做一些優(yōu)化，導(dǎo)致CSS3動(dòng)畫(huà)性能上稍有優(yōu)勢(shì)（新建一個(gè)圖層來(lái)跑動(dòng)畫(huà)）。
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à)）
關(guān)鍵幀有兩種寫(xiě)法：
@keyframes
dot {
from {
background-color: red;}
to {
background-color: yellow;}
}
上下效果同等。
@keyframes
dot {
0% {
background-color: red;}
100% {
background-color: yellow;}
}
接下來(lái)編寫(xiě)完動(dòng)畫(huà)，需要使用該動(dòng)畫(huà)。
animation-name：設(shè)置需要綁定到元素的動(dòng)畫(huà)名稱；
animation-duration：設(shè)置完成動(dòng)畫(huà)所需要花費(fèi)的時(shí)間，單位為秒或毫秒，默認(rèn)為 0；
animation-timing-function：設(shè)置動(dòng)畫(huà)的速度曲線，默認(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的形體變化 —— Transform API 只能轉(zhuǎn)換由盒模型定位的元素。
- Translate(移動(dòng))
- Scale(縮放)
- Rotate(旋轉(zhuǎn))
- Skew(傾斜)
如沒(méi)特殊注明，文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自http://723918.com/news/6697.html
