1.@keyframes
- @keyframes 規(guī)則是創(chuàng)建動(dòng)畫。
- @keyframes 規(guī)則內(nèi)指定一個(gè) CSS 樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式接校。
2.寫法
@keyframes my
{
from {background: red;}
to {background: yellow;}
}
div{
animation: my 5s;/*動(dòng)畫名稱 動(dòng)畫時(shí)長*/
}
animation-name: 規(guī)定 @keyframes 動(dòng)畫的名稱
animation-duration: 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒,默認(rèn)是 0
animation-timing-function: 規(guī)定動(dòng)畫的速度曲線筹吐,默認(rèn)是 "ease"
animation-delay: 規(guī)定動(dòng)畫何時(shí)開始糖耸,默認(rèn)是 0
animation-iteration-count: 規(guī)定動(dòng)畫被播放的次數(shù),默認(rèn)是 1
animation-direction: 規(guī)定動(dòng)畫是否在下一周期逆向地播放丘薛,默認(rèn)是 "normal"嘉竟。
animation-play-state: 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停,默認(rèn)是 "running"洋侨。