CSS3動(dòng)畫是怎么實(shí)現(xiàn)的-創(chuàng)新互聯(lián)

這篇文章主要講解了“CSS3動(dòng)畫是怎么實(shí)現(xiàn)的”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS3動(dòng)畫是怎么實(shí)現(xiàn)的”吧！

連城網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),連城網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為連城上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的連城做網(wǎng)站的公司定做！

　　動(dòng)畫

　　CSS3屬性中有關(guān)于制作動(dòng)畫的三個(gè)屬性：

　　transform,transition,animation

　　keyframes

　　@keyframes mymove{ from{初始狀態(tài)屬性}

　　to{結(jié)束狀態(tài)屬性}

　　}

　　或

　　@keyframes mymove{

　　0%{初始狀態(tài)屬性}

　　100%{結(jié)束狀態(tài)屬性}

　　}(中間再可以添加關(guān)鍵幀)

　　

　　animation和transition的區(qū)別

　　相同點(diǎn)：都是隨著時(shí)間改變?cè)氐膶傩灾?。不同點(diǎn)：transition需要觸發(fā)一個(gè)事件(hover事件或click事件等)才會(huì)隨時(shí)間改變其css屬性; 而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來改變?cè)豤ss的屬性值，從而達(dá)到一種動(dòng)畫的效果，css3的animation就需要明確的動(dòng)畫屬性值。

　　animation

　　animation復(fù)合屬性。檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫特效。

　　1.animation-name 檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫名稱

　　說明：必須與規(guī)則@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove

　　2.animation-duration 檢索或設(shè)置對(duì)象動(dòng)畫的持續(xù)時(shí)間

　　說明：animation-duration:3s; 動(dòng)畫完成使用的時(shí)間為3s

　　3.animation-timing-function 檢索或設(shè)置對(duì)象動(dòng)畫的過渡類型

　　說明： 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è)置對(duì)象動(dòng)畫延遲的時(shí)間

　　說明：animation-delay:0.5s; 動(dòng)畫開始前延遲的時(shí)間為0.5s)

　　5.animation-iteration-count 檢索或設(shè)置對(duì)象動(dòng)畫的循環(huán)次數(shù)

　　說明：animation-iteration-count: infinite | number;

　　infinite：無限循環(huán)

　　number: 循環(huán)的次數(shù)

　　6.animation-direction 檢索或設(shè)置對(duì)象動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng)

　　說明：normal：正常方向

　　reverse：反方向運(yùn)行

　　alternate：動(dòng)畫先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行

　　alternate-reverse：動(dòng)畫先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行

　　7.animation-play-state 檢索或設(shè)置對(duì)象動(dòng)畫的狀態(tài)

　　說明： animation-play-state:running | paused;

　　running:運(yùn)動(dòng)

　　paused: 暫停

　　animation-play-state:paused; 當(dāng)鼠標(biāo)經(jīng)過時(shí)動(dòng)畫停止，鼠標(biāo)移開動(dòng)畫繼續(xù)執(zhí)行

　　實(shí)例

　　

感謝各位的閱讀，以上就是“CSS3動(dòng)畫是怎么實(shí)現(xiàn)的”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)CSS3動(dòng)畫是怎么實(shí)現(xiàn)的這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

分享標(biāo)題：CSS3動(dòng)畫是怎么實(shí)現(xiàn)的-創(chuàng)新互聯(lián)
鏈接分享：http://bm7419.com/article36/dsspsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、App設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)