How to Flip the div in time intervals - html

Question

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.
/* ::: 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); }
}
<div class="holder flipH">
<div class="card">
<div class="front">A</div>
<div class="back">A</div>
</div>
</div>
<div class="holder flipV">
<div class="card">
<div class="front">B</div>
<div class="back">B</div>
</div>
</div>
<div class="holder flipH">
<div class="card">
<div class="front">C</div>
<div class="back">C</div>
</div>
</div>

Answer 1

As Maddy says, animation delay is the trick
/* ::: 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 3s 0s infinite alternate ease-in-out;
-webkit-animation: flipH 3s 0s infinite alternate ease-in-out;
}
.flipV .card{
animation: flipV 3s 1s infinite alternate ease-in-out;
-webkit-animation: flipV 3s 1s infinite alternate ease-in-out;
}
.flipH:nth-child(3) .card {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#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); }
}
<div class="holder flipH">
<div class="card">
<div class="front">A</div>
<div class="back">A</div>
</div>
</div>
<div class="holder flipV">
<div class="card">
<div class="front">B</div>
<div class="back">B</div>
</div>
</div>
<div class="holder flipH">
<div class="card">
<div class="front">C</div>
<div class="back">C</div>
</div>
</div>

Answer 2

There is in css3 2 type of tag animation-delay and animation-iteration-count, you need to google for that.
I think you want something like this-
.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 1 alternate ease-in-out;
-webkit-animation: flipH 2s 0s infinite alternate ease-in-out;
}
.flipV .card{
animation: flipV 2s 1s 1 alternate ease-in-out;
-webkit-animation: flipV 2s 0s infinite alternate ease-in-out;
}
.flipH.flipH2 .card{
animation: flipH 2s 2s 1 alternate ease-in-out;
-webkit-animation: flipH 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); }
}
<div class="holder flipH">
<div class="card">
<div class="front">A</div>
<div class="back">A</div>
</div>
</div>
<div class="holder flipV">
<div class="card">
<div class="front">B</div>
<div class="back">B</div>
</div>
</div>
<div class="holder flipH flipH2">
<div class="card">
<div class="front">C</div>
<div class="back">C</div>
</div>
</div>
I hope it will helps you.