animateCSS動(dòng)畫程序接口（Chrome可用）

2023-12-18    分類： 網(wǎng)站建設(shè)

jQuery中很早就提供了animate方法，使用它可以很方便地實(shí)現(xiàn)一些簡單動(dòng)畫效果。后來CSS3中也提供了animation用于動(dòng)畫效果制作，但CSS本身的可操作性太差，所以用起來并不方便?，F(xiàn)在最新版的Chrome原生支持了animate方法，彌補(bǔ)了CSS的操作缺陷。 　　元素上的animate方法有兩個(gè)參數(shù)。第一個(gè)參數(shù)是動(dòng)畫的關(guān)鍵幀列表，是一個(gè)數(shù)組，每一個(gè)數(shù)組項(xiàng)都是一個(gè)JavaScript對(duì)象，可以在上面設(shè)置這個(gè)關(guān)鍵幀上元素的樣式屬性，并且使用offset屬性表示這個(gè)關(guān)鍵幀在整條時(shí)間軸中的位置百分比；第二個(gè)參數(shù)是動(dòng)畫播放的配置參數(shù)，用于描述動(dòng)畫的時(shí)長、播放速度、過渡方式，等參數(shù)。從CSS的角度看，這個(gè)animate方法的第一個(gè)參數(shù)就是在創(chuàng)建keyframes，第二個(gè)參數(shù)是為元素添加animation樣式屬性。整個(gè)邏輯和CSS中使用animation沒什么區(qū)別。 　　下面是使用的演示： 運(yùn)行 　　函數(shù)除了可以調(diào)用之外還有返回值，這個(gè)animate方法會(huì)返回一個(gè)AnimationPlayer對(duì)象實(shí)例，它提供了一個(gè)onfinish事件和一個(gè)cancel方法，具體作用看名字就能猜到。

我覺得這個(gè)方法將來會(huì)很有用，只是目前只有Chrome支持，無法在一般項(xiàng)目中使用而已。 本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前名稱：animateCSS動(dòng)畫程序接口（Chrome可用）
本文路徑：http://www.muchs.cn/news4/309254.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、服務(wù)器托管、云服務(wù)器、靜態(tài)網(wǎng)站、虛擬主機(jī)、ChatGPT

廣告

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

微信小程序開發(fā)