CSS3动画:rotateX可以翻转两个以上的div

Question

我目前有以下HTML和CSS，它们可以在两个div的内容之间切换。

我如何扩展到在4个（或更多）div之间切换？

我想这两种方法中的任何一种都可能是前进的道路，但我不确定如何实施它们！

• 在CCD_ 1处暂停动画，然后开始第二组动画
• 或者当div处于CCD_ 2时改变div的内容

HTML

<div class="flip1">
  FLIP 1<br />
  FLIP 1<br />
  FLIP 1<br />
  FLIP 1<br />
</div>
<div class="flip2">
  FLIP 2<br />
  FLIP 2<br />
  FLIP 2<br />
  FLIP 2<br />
</div>

CSS

div {
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:linear;
    -webkit-backface-visibility: hidden;
    color: blue;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    padding: 20px;
    position: absolute;
}
@-webkit-keyframes flip1 {
    from { -webkit-transform: rotateX(0deg); }
    to { -webkit-transform: rotateX(360deg); }
}
div.flip1 {
    -webkit-animation-name: flip1;
}
@-webkit-keyframes flip2 {
    from { -webkit-transform: rotateX(-180deg); }
    to { -webkit-transform: rotateX(180deg); }
}
div.flip2 {
    -webkit-animation-name: flip2;
}

Answer 1

我最终用了一点JavaScript。

HTML是：

<div class="flippable" id="flip1">
  FLIP 1<br />
  FLIP 1<br />
  FLIP 1<br />
  FLIP 1<br />
</div>
<div class="flippable" id="flip2">
  FLIP 2<br />
  FLIP 2<br />
  FLIP 2<br />
  FLIP 2<br />
</div>
<div class="flippable" id="flip3">
  FLIP 3<br />
  FLIP 3<br />
  FLIP 3<br />
  FLIP 3<br />
</div>
<div class="flippable" id="flip4">
  FLIP 4<br />
  FLIP 4<br />
  FLIP 4<br />
  FLIP 4<br />
</div>
<script>
$(document).ready(function() {
  flip_flippables();
  setInterval(flip_flippables, $('.flippable').length*2000);
  function flip_flippables(){
    $('.flippable').each(function(index) {
        setTimeout(function(thisObj) { thisObj.addClass("flippedforward"); }, index*2000, $(this));
        $(this).removeClass("flippedforward");
    });
  }
});
</script>

CSS是：

.flippable {
    -webkit-transform: rotateX(-90deg);
    color: blue;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    padding: 20px;
    position: absolute;
}
.flippedforward {
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: flip;
    -webkit-transform: rotateX(90deg);
}
@-webkit-keyframes flip {
    0% { -webkit-transform: rotateX(-90deg); }
    25% { -webkit-transform: rotateX(0deg); }
    75% { -webkit-transform: rotateX(0deg); }
    100% { -webkit-transform: rotateX(90deg); }
}