Question

嗨，请查看此脚本并告诉我如何按时间间隔翻转A B和C div。我希望A首先翻转然后停止，B翻转然后停止，接着是C然后再回到A，B和C，就像在循环中一样重新开始。这在CSS3中是否可行？在此代码中，所有div都在同一时间翻转。

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

在css3 2类型的标记animation-delay和animation-iteration-count中，您需要谷歌。

我想你想要这样的东西 -

＆＃13;

.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); }
}

＆＃13;

<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>

＆＃13;

我希望它会对你有所帮助。

Answer 2

正如Maddy所说，动画延迟就是一招

＆＃13;

/* ::: 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); }
}

＆＃13;

<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>

＆＃13;

如何在时间间隔内翻转div

2 个答案: