Question

我目前有以下HTML和CSS，它们会产生在两个div的内容之间翻转的效果。

我如何扩展这个以在4（或更多）div之间翻转？

我认为这些方法中的任何一种都可能是前进的方法，但我不确定如何实施它们！

暂停rotateX(90deg)的动画，然后启动第二组动画;
或更改div位于rotateX(90deg)时的内容。

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

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

1 个答案: