通過(guò) CSS3，我們能夠創(chuàng)建動(dòng)畫(huà)
如果要在 CSS3 中創(chuàng)建動(dòng)畫(huà)，需要使用 @keyframes 規(guī)則
animation屬性是復(fù)合屬性 檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫(huà)特效
@keyframes 創(chuàng)建動(dòng)畫(huà)
語(yǔ)法：
@keyframes 動(dòng)畫(huà)名{
具體關(guān)鍵樣式變化
}
@-webkit-keyframes 動(dòng)畫(huà)名{
具體關(guān)鍵樣式變化
}
//關(guān)鍵字
@keyframes 動(dòng)畫(huà)名{
from{}
to{}
to{}
}
//百分比
@keyframes 動(dòng)畫(huà)名{
0%,100%{}
50%{}
/* 100%{}*/
}
animation-name
- 作用：指定動(dòng)畫(huà)名稱(chēng)
- 取值
- 默認(rèn) none 規(guī)定無(wú)動(dòng)畫(huà)效果
- @keyframes定義動(dòng)畫(huà)名稱(chēng)
animation-duration 屬性
- 作用：定義動(dòng)畫(huà)持續(xù)的時(shí)間
- 取值
- 單位：以秒或毫秒計(jì)
- 默認(rèn)值為0，需要設(shè)置該屬性，否則不會(huì)播放動(dòng)畫(huà)
animation-timing-function
- 作用：定義動(dòng)畫(huà)的時(shí)間函數(shù)
animation-iteration-count
- 作用：定義動(dòng)畫(huà)播放次數(shù)
- 取值
- 1【默認(rèn)值】表示1次
- 數(shù)值 定義動(dòng)畫(huà)播放次數(shù)
- infinite 規(guī)定動(dòng)畫(huà)應(yīng)該無(wú)限次播放。
animation-direction
- 作用：定義動(dòng)畫(huà)運(yùn)動(dòng)的方向
- 取值
- normal：正常方向
- reverse：反方向運(yùn)行
- alternate：正向反向交替—》動(dòng)畫(huà)先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行
- alternate-reverse：反向正向交替——》 動(dòng)畫(huà)先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行
animation-play-state
作用：動(dòng)畫(huà)的執(zhí)行狀態(tài)
取值：
- running:運(yùn)動(dòng)【默認(rèn)】
- paused: 暫停
animation-fill-mode
作用：設(shè)置動(dòng)畫(huà)在運(yùn)動(dòng)時(shí)間之外的狀態(tài)
- none 默認(rèn)值
- 進(jìn)場(chǎng)之前和動(dòng)畫(huà)結(jié)束之后都停留在元素的初始狀態(tài)
- forwards 動(dòng)畫(huà)結(jié)束之后停留在結(jié)束幀狀態(tài)
- backwards 動(dòng)畫(huà)進(jìn)場(chǎng)之前停留在初始幀狀態(tài)
- both 以上兩者
animation簡(jiǎn)寫(xiě)
- 語(yǔ)法：
```文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-430338.html
animation:
動(dòng)畫(huà)名字 動(dòng)畫(huà)持續(xù)時(shí)間 動(dòng)畫(huà)時(shí)間函數(shù) 動(dòng)畫(huà)延遲時(shí)間 動(dòng)畫(huà)執(zhí)行次數(shù) 動(dòng)畫(huà)的方向 動(dòng)畫(huà)的播放狀態(tài) 填充模式
默認(rèn)值：none 0 ease 0 1 normal running none;文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-430338.html
```
到了這里，關(guān)于animation動(dòng)畫(huà)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
