title: How to Flip the div in time intervals
body: <p>Hi please look at this script and tell me how to flip A B and C divs in time intervals. I want A to flip first then it stops, B flips next and stops, and C next and Back to A, B and C again like in a loop and start it over again. Is this possible in CSS3 ? In this code all the divs flip on the same time. 
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* ::: HOLDER, CARD, FACES */
  .holder {
    display:     inline-block;
    width:       64px;
    height:      64px;
    perspective: 700px;
  }
  .card, .front, .back{
    position:   absolute;
    height:     inherit;
    width:      inherit;
    transition: all .7s;
    transform-style:     preserve-3d;
    backface-visibility: hidden;
  }
  
  /* ::: FACES */
  .front{background: tomato;}
  .back{background:  slategray;}
  
  /* ::: SETUP FACES */
  .flipH .back{transform: rotateY(-180deg);}
  .flipV .back{transform: rotateX(180deg);}
  
  /* ::: HOVER EFFECTS (Remove Automated for this to work) */
  .flipH:hover .card{ transform: rotateY(180deg); }
  .flipV:hover .card{ transform: rotateX(-180deg); }
  
  /* ::: AUTOMATED EFFECTS */
  .flipH .card{
    animation: flipH 2s 0s infinite alternate ease-in-out;
    -webkit-animation: flipH 2s 0s infinite alternate ease-in-out;
  }
  .flipV .card{
    animation: flipV 2s 0s infinite alternate ease-in-out;
    -webkit-animation: flipV 2s 0s infinite alternate ease-in-out;
  }
  @keyframes flipH {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-180deg); }
  }
  @-webkit-keyframes flipH {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(-180deg); }
  }
  @keyframes flipV {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(-180deg); }
  }
  @-webkit-keyframes flipV {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(-180deg); }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="holder flipH"&gt;
    &lt;div class="card"&gt;
      &lt;div class="front"&gt;A&lt;/div&gt;
      &lt;div class="back"&gt;A&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="holder flipV"&gt;
    &lt;div class="card"&gt;
      &lt;div class="front"&gt;B&lt;/div&gt;
      &lt;div class="back"&gt;B&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="holder flipH"&gt;
    &lt;div class="card"&gt;
      &lt;div class="front"&gt;C&lt;/div&gt;
      &lt;div class="back"&gt;C&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>