title: Settimeout in animation
body: <p>How to implement the code below to my animation, my animation is in infinite loop  i want after each animation it will pause for 10 sec then start again, im using animate.css </p>
  
  <p><strong>note: i pasted the keyframe below</strong></p>
  
  <pre><code>setTimeout(function() {  
    // 1000 == 1 seconds
    // modify dom elements here  
    // your code here
  }, 1000);
  </code></pre>
  
  <p>HTML + CSS code of it</p>
  
  <pre><code>&lt;h1 class="motext animated fadeInDownBig"&gt;THINK QUALITY. THINK LIFELINE.&lt;/h1&gt;
  
  
   .motext {
      animation-duration: 20s;
      animation-delay: 19s;
      animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
       width:90%;
       max-width:1170px;
       margin:auto;
        text-align:right;
       position:relative;
      }
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  @-webkit-keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-2000px);
      -ms-transform: translateY(-2000px);
      transform: translateY(-2000px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
  }
  </code></pre>