柚子快報(bào)邀請(qǐng)碼778899分享：前端 css3實(shí)現(xiàn)動(dòng)畫(huà)無(wú)限循環(huán)

http://yzkb.51969.com/

要在CSS3中實(shí)現(xiàn)動(dòng)畫(huà)的無(wú)限循環(huán)，你可以使用animation 屬性和 infinite 關(guān)鍵字。以下是一個(gè)示例：

@keyframes myAnimation {

0% { /* 起始狀態(tài) */ }

50% { /* 中間狀態(tài) */ }

100% { /* 結(jié)束狀態(tài) */ }

}

.element {

animation: myAnimation 2s infinite; /* 設(shè)置動(dòng)畫(huà)為2秒鐘的時(shí)間，并無(wú)限循環(huán) */

}

在上面的示例中，我們首先使用 @keyframes 聲明了一個(gè)名為 myAnimation 的關(guān)鍵幀動(dòng)畫(huà)。然后，在 .element 類(lèi)選擇器中，通過(guò) animation 屬性將該動(dòng)畫(huà)應(yīng)用到一個(gè)元素上。設(shè)置 2s 即動(dòng)畫(huà)的時(shí)長(zhǎng)為2秒，并且使用 infinite 關(guān)鍵字來(lái)表示動(dòng)畫(huà)應(yīng)該無(wú)限循環(huán)。

你可以根據(jù)需要調(diào)整關(guān)鍵幀的百分比和對(duì)應(yīng)的樣式，以創(chuàng)建不同效果的動(dòng)畫(huà)。

柚子快報(bào)邀請(qǐng)碼778899分享：前端 css3實(shí)現(xiàn)動(dòng)畫(huà)無(wú)限循環(huán)

http://yzkb.51969.com/

文章來(lái)源