jQuery中很早就提供了animate方法,使用它可以很方便地實現(xiàn)一些簡單動畫效果。后來CSS3中也提供了animation用于動畫效果制作,但CSS本身的可操作性太差,所以用起來并不方便?,F(xiàn)在最新版的Chrome原生支持了animate方法,彌補(bǔ)了CSS的操作缺陷。
元素上的animate方法有兩個參數(shù)。第一個參數(shù)是動畫的關(guān)鍵幀列表,是一個數(shù)組,每一個數(shù)組項都是一個JavaScript對象,可以在上面設(shè)置這個關(guān)鍵幀上元素的樣式屬性,并且使用offset屬性表示這個關(guān)鍵幀在整條時間軸中的位置百分比;第二個參數(shù)是動畫播放的配置參數(shù),用于描述動畫的時長、播放速度、過渡方式,等參數(shù)。從CSS的角度看,這個animate方法的第一個參數(shù)就是在創(chuàng)建keyframes,第二個參數(shù)是為元素添加animation樣式屬性。整個邏輯和CSS中使用animation沒什么區(qū)別。
下面是使用的演示:
運行
函數(shù)除了可以調(diào)用之外還有返回值,這個animate方法會返回一個AnimationPlayer對象實例,它提供了一個onfinish事件和一個cancel方法,具體作用看名字就能猜到。
我覺得這個方法將來會很有用,只是目前只有Chrome支持,無法在一般項目中使用而已。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司!
當(dāng)前名稱:animateCSS動畫程序接口(Chrome可用)
本文路徑:http://www.rwnh.cn/news4/309254.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、服務(wù)器托管、云服務(wù)器、靜態(tài)網(wǎng)站、虛擬主機(jī)、ChatGPT
廣告
聲明:本網(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)