1本今、animation動(dòng)畫(huà)
定義動(dòng)畫(huà)Keyframes
語(yǔ)法:@keyframes animationname{keyframes-selector {css-style;}}
?animationname :定義動(dòng)畫(huà)的名稱
from(與0%相同)
to(與100%相同)
2、animation的播放
?1蜈首、設(shè)置動(dòng)畫(huà)的播放方式
? 播放次數(shù)的角度:infinite:無(wú)限次播放(不加此屬性只播一次)
? 播放速度角度:animation-timing-function規(guī)定動(dòng)畫(huà)的速度曲線
語(yǔ)法:animation-timing-function:value;
value:linear 動(dòng)畫(huà)從頭到尾的速度是相同的
? ? ? ? ?ease:默認(rèn)悔橄。動(dòng)畫(huà)以低速開(kāi)始记盒,然后加快悯仙,在結(jié)束前變慢
? ? ? ? ?ease-in動(dòng)畫(huà)以低速開(kāi)始
? ? ? ? ?ease-out動(dòng)畫(huà)以低速結(jié)束?
? ? ? ? ?ease-in-out動(dòng)畫(huà)以低速開(kāi)始捐下,低速結(jié)束
? ? ? ?cubic-bezier(x1,y1,x2,y2) 在 cubic-bezier 函數(shù)中自己的值《涫牛可能的值是從 0 到 1 的數(shù)值蔚袍。
2、設(shè)置動(dòng)畫(huà)開(kāi)始播放時(shí)間、
animation-delay 屬性定義動(dòng)畫(huà)何時(shí)開(kāi)始啤咽。
語(yǔ)法:animation-delay: time;
animation-duration 屬性定義動(dòng)畫(huà)完成一個(gè)周期所需要的時(shí)間晋辆,以秒或毫秒計(jì)
語(yǔ)法:? animation-duration: time;
3、設(shè)置動(dòng)畫(huà)播放方向
animation-direction 屬性定義是否應(yīng)該輪流反向播放動(dòng)畫(huà)宇整。
語(yǔ)法:animation-direction: normal /? alternate;
normal:默認(rèn)值? 動(dòng)畫(huà)正常播放
alternate:讓動(dòng)畫(huà)輪流反向播放
4瓶佳、動(dòng)畫(huà)播放次數(shù)
animation-iteration-count ?屬性定義動(dòng)畫(huà)的播放次數(shù)。
語(yǔ)法:animation-iteration-count: n/infinite;
n : 定義動(dòng)畫(huà)的播放次數(shù)
infinite : 定義動(dòng)畫(huà)無(wú)限播放
5鳞青、動(dòng)畫(huà)時(shí)間外屬性
animation-fill-mode? 屬性規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)(當(dāng)動(dòng)畫(huà)完成時(shí)霸饲,或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)),要應(yīng)用到元素的樣式臂拓。
語(yǔ)法:animation-fill-mode: none|forwards|backwards|both
none :默認(rèn)值厚脉。動(dòng)畫(huà)在動(dòng)畫(huà)執(zhí)行之前和之后不會(huì)應(yīng)用任何樣式到目標(biāo)元素。
forwards :? 在動(dòng)畫(huà)結(jié)束后(由 animation-iteration-count 決定)胶惰,動(dòng)畫(huà)體被鎖定的位置在結(jié)束的位置
backwards:在動(dòng)畫(huà)結(jié)束后(由 animation-iteration-count 決定)傻工,動(dòng)畫(huà)體被鎖定 的位置在開(kāi)始的位置