這篇文章主要講解了“CSS3動畫是怎么實現(xiàn)的”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“CSS3動畫是怎么實現(xiàn)的”吧!
連城網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),連城網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為連城上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請找那個售后服務(wù)好的連城做網(wǎng)站的公司定做!CSS3屬性中有關(guān)于制作動畫的三個屬性:
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ū)別
相同點:都是隨著時間改變元素的屬性值。不同點:transition需要觸發(fā)一個事件(hover事件或click事件等)才會隨時間改變其css屬性; 而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值,從而達到一種動畫的效果,css3的animation就需要明確的動畫屬性值。
animation
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)鼠標(biāo)經(jīng)過時動畫停止,鼠標(biāo)移開動畫繼續(xù)執(zhí)行
實例
感謝各位的閱讀,以上就是“CSS3動畫是怎么實現(xiàn)的”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對CSS3動畫是怎么實現(xiàn)的這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
分享標(biāo)題:CSS3動畫是怎么實現(xiàn)的-創(chuàng)新互聯(lián)
鏈接分享:http://muchs.cn/article36/dsspsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、App設(shè)計、移動網(wǎng)站建設(shè)、用戶體驗、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)