animate.cssの無限クラスを遅延させる方法は？

Question

私はhttps://daneden.github.io/animate.css/を使用してCSSアニメーションを作成しています。私は現在、それを繰り返すために無限クラスを使用しています。しかし、私はそれを毎秒の代わりに5秒ごとに繰り返す必要があります。 CSSやjQueryでこれを行う方法はありますか？ここで

は私のコードです：

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

Answer 1

それは、私の友人in the docsです：

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

Answer 2

確かに、あなたはあなたのアニメーションは、5秒ごとに繰り返しinfiniteにanimation-iteration-countを設定し、設定したい場合animation-durationの値には、アニメーションが必要な時間が含まれますが、5秒の遅延が含まれます。

たとえば、以下の例では、animation: color 6s infinite;はアニメーションを6秒に設定し、アニメーションでは黒から赤に17％（1秒）までフェードアウトしてからすぐに、アニメーション（5秒）を繰り返すと、それが繰り返されます。これは、1秒で黒から赤にフェーディングする方法で、リセットして5秒間遅延させると、アニメーションが繰り返されます。唯一のアニメーションの最初の反復を遅らせる

h1 { 
 
    animation: color 6s infinite; 
 
} 
 

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

<h1>hello</h1>