這篇文章主要介紹css3實現(xiàn)循環(huán)執(zhí)行動畫的方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了北屯免費建站歡迎大家使用！

一、最終效果

需求：gift圖片的小動畫每隔2s執(zhí)行一次。

需求就一句話，我們看一下實現(xiàn)過程。

二、實現(xiàn)過程

1、網(wǎng)頁結(jié)構(gòu)

效果圖：

2、原始動畫

原始動畫效果為：鼠標(biāo)hover上去出現(xiàn)動畫。

動畫樣式如下：

/*動畫*/
    .ico:hover{
    -webkit-animation: Tada 1s both;
    -moz-animation: Tada 1s both;
    -ms-animation: Tada 1s both;
    animation: Tada 1s both
}
/*瀏覽器兼容性部分略過*/
@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    10%,20% {
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

效果：鼠標(biāo)hover上去gift圖片會動一動。

3、實現(xiàn)變化后的需求

需求變動，要求不再是hover上去展示動畫，而是每隔2s展示一次動畫。

思路：不需要hover上去出現(xiàn)動畫，就把hover去掉，每隔2s顯示一次動畫，很容易想到延遲2s,然后動畫一直執(zhí)行。

此時相關(guān)樣式變成：

.ico {
	-webkit-animation: Tada 1s 2s both infinite;
	-moz-animation: Tada 1s 2s both infinite;
	-ms-animation: Tada 1s 2s both infinite;
	animation: Tada 1s 2s both infinite;
}

但是顯示的效果是：頁面加載第一次出現(xiàn)動畫會延遲2s，后面的動畫將不再有延遲。如下，這是不符合需求的。

為了看出效果，下圖為延遲6s的效果。

此時換種思路，不要延遲執(zhí)行動畫，而是動畫的效果本身就是前2s元素不動，后1s是元素動，然后一直循環(huán)執(zhí)行。 這樣在視覺上就會看起來是延遲2s執(zhí)行1s動畫。

計算一下，原來的百分比節(jié)點變成了多少。

將動畫總時長變成3s，用計算出的百分比替換原來的百分比，代碼如下：

.ico{
    -webkit-animation: Tada 3s both infinite;
    -moz-animation: Tada 3s both infinite;
    -ms-animation: Tada 3s both infinite;
    animation: Tada 3s both infinite;
}
@keyframes Tada {
    0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

效果就是我們期望的了：

以上是css3實現(xiàn)循環(huán)執(zhí)行動畫的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！