IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
第二步:用animation調(diào)用已制定的動畫的軌跡規(guī)則
animation復(fù)合屬性。檢索或設(shè)置對象所應(yīng)用的動畫特效。
1.animation-name 檢索或設(shè)置對象所應(yīng)用的動畫名稱
說明:必須與規(guī)則@keyframes配合使用,eg:@keyframes mymove{} animation-name:mymove
2.animation-duration 檢索或設(shè)置對象動畫的持續(xù)時間
說明:animation-duration:3s; 動畫完成使用的時間為3s
3.animation-timing-function 檢索或設(shè)置對象動畫的過渡類型
說明:linear:線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease:平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
4.animation-delay 檢索或設(shè)置對象動畫延遲的時間
說明:animation-delay:0.5s; 動畫開始前延遲的時間為0.5s)
5.animation-iteration-count 檢索或設(shè)置對象動畫的循環(huán)次數(shù)
說明:animation-iteration-count: infinite | number;
infinite:無限循環(huán)
number: 循環(huán)的次數(shù)
6.animation-direction 檢索或設(shè)置對象動畫在循環(huán)中是否反向運動
說明:normal:正常方向
reverse:反方向運行
alternate:動畫先正常運行再反方向運行,并持續(xù)交替運行
alternate-reverse:動畫先反運行再正方向運行,并持續(xù)交替運行
7.animation-play-state 檢索或設(shè)置對象動畫的狀態(tài)
說明:animation-play-state:running | paused;
running:運動
paused: 暫停
animation-play-state:paused; 當(dāng)鼠標經(jīng)過時動畫停止,鼠標移開動畫繼續(xù)執(zhí)行
簡寫:animation: name duration timing-function delay iteration-count direction fill-mode;
案例: 刷新頁面,div沿著x方向運動
代碼實現(xiàn)
瀏覽器兼容處理:
瀏覽器兼容處理
三、animation和transition的區(qū)別
相同點:都是隨著時間改變元素的屬性值。
不同點:transition需要觸發(fā)一個事件(hover事件或click事件等)才會隨時間改變其css屬性; 而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值,從而達到一種動畫的效果,css3的animation就需要明確的動畫屬性值。
>>本文地址:http://uj2y2uok.com/zhuanye/2019/48238.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個方向的工作?