如何延遲animate.css中的無限類？

我使用https://daneden.github.io/animate.css/爲了創建一個CSS動畫。我目前正在使用無限類來重複它。但是我想讓它每隔5秒左右重複一次，而不是每秒重複一次。有沒有辦法用CSS或jQuery做到這一點？如何延遲animate.css中的無限類？

這裏是我的代碼：

<div class="row"> 
       <div class="col-12 name animated infinite zoomIn"> 
        <h1>vicki williams</h1> 
       </div> 
      </div>

來源

2017-01-23 YoungCoder

這是in the docs，我的朋友：

#yourElement { 
    -vendor-animation-duration: 3s; 
    -vendor-animation-delay: 2s; 
    -vendor-animation-iteration-count: infinite; 
}

來源

2017-01-23 01:19:55

這只是延遲動畫的第一次迭代。從它的聲音中，OP想要延遲發生在動畫的每一次迭代中，而不僅僅是第一次。 –

是的，所有這些和更多是在文檔中。謝謝@MichaelCoker。 –

謝謝你，我會檢查出來。必須跳過它。 – YoungCoder

當然，如果你希望你的動畫，每5秒重複，設置animation-iteration-count到infinite並設置animation-duration設置爲一個值，該值包含無論您想要動畫需要多長時間，然後包括5秒的延遲。

例如，在下面的示例中，animation: color 6s infinite;將動畫設置爲6秒，並且在我的動畫中，我從黑色漸變爲紅色，最高達17％（1秒），然後立即背對背並穿過其餘部分動畫（5s），然後重複。這是在1秒內從黑色變爲紅色，重置並延遲5秒的方式，然後動畫重複。

h1 { 
 
    animation: color 6s infinite; 
 
} 
 

 
@keyframes color { 
 
    0% { 
 
    color: black; 
 
    } 
 
    17% { 
 
    color: red; 
 
    } 
 
    18% { 
 
    color: black; 
 
    } 
 
}

<h1>hello</h1>

來源

2017-01-23 01:20:50

如何延遲animate.css中的無限類？

回答

相關問題