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

http://yzkb.51969.com/

要在CSS3中實(shí)現(xiàn)動畫的無限循環(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è)置動畫為2秒鐘的時(shí)間，并無限循環(huán) */

}

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

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

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

http://yzkb.51969.com/

文章來源