Как перевернуть div по временным интервалам

Question

Привет, пожалуйста, посмотрите на этот скрипт и скажите мне, как перевернуть интервалы A и B в промежутки времени. Я хочу, чтобы A сначала щелкнул, затем он остановился, B снова переключился и остановился, а C следующий и Назад к A, B и C снова, как в цикле, и запустил его снова. Возможно ли это в CSS3? В этом коде все divs переворачиваются в одно и то же время.

/* ::: 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

Как говорит Мэдди, задержка анимации трюк

/* ::: 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

Существует в CSS3 2 типа тега animation-delay и animation-iteration-count, вы должны Google для этого.

Я думаю, что вы хотите что-то вроде 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>

Я надеюсь, что это поможет.