具有CSS动画/变换。我怎样才能将一个div向上翻转然后向下倾斜，然后再将另一个div向上翻转和向下暂停和循环播放？

Question

我对CSS动画/转换有疑问。我想从底部翻转一个div作为原点，然后向上翻转，然后向下翻转。之后，另一个div向上翻转，然后再次向下滚动。并在div之间的暂停间无限重复此操作，以免它们同时翻动。

注意：我已经尝试过使用动画延迟，并且在您使用0％{...} 20％，100％{...}的css动画技巧下，似乎无法确定我希望它如何工作。

编辑：这是有关我要执行的操作的js小提琴链接。这是我遇到的问题。 https://jsfiddle.net/9qx0Lnj6/1/

快速更新：这里有一个GIF，可以直观地看到我的意思和我要实现的目标。 https://giphy.com/gifs/ywIkiagNlsm4ux2QSd

<div class="container">
  <div class="icon-wrap">
    <div class="icon-one icon">
        One
    </div>
    <div class="icon-two icon">
        Two
    </div>
  </div>
</div>

`.container {
      position: relative;
      .icon-wrap {
        position: relative;
        width: 50px;
        height: 50px;
        overflow:hidden;
        perspective: 1000px;
        .icon {
          position:absolute;
          width:50px;
          height:50px;
        }
        .icon-one {
          background:red;
          transform-origin: bottom;
          transform-style: preserve-3d;
          animation: 3s flip 2s infinite linear;
        }
        .icon-two {
          background:blue;
          transform-origin: bottom;
          transform-style: preserve-3d;
          animation: 3s flip infinite linear;
        }
      }
    }`

    `@keyframes flip{
                0% {
                transform: rotateX(180deg)
              }
              14% {
                transform: rotateX(0deg);
              }
              100% {
                transform: rotateX(0deg);
              }
    }`

Answer 1

尝试一下：

var a = document.querySelectorAll('div');
a = Array.prototype.slice.call(a);

var timings = {
  easing: 'ease-in-out',
  iterations: Infinity,
  direction: 'alternate',
  fill: 'both'
}

a.forEach(function(el, i, ra) {
  timings.delay = i  * 2400;
  
  timings.duration = 5000;
  el.animate([
    {transform: 'rotateX(180deg)'},
    {transform:'rotateX(-180deg)'}
  ], timings);
  
  timings.duration = 7500;
  el.animate([
    {opacity: 1},
    {opacity: 0}
  ], timings);
  
  timings.duration = 10000;
 
});

$background: #e45349;
$light: #efefff;

body {
  background: $background;
  display: flex;
  justify-content: center;
}

div {
    display:     inline-block;
  
   position:   absolute;
  height:     inherit;
   text-align: center;
  width:      inherit;
  
  transform-style:     preserve-3d;
  backface-visibility: hidden;
   width:70px;
      height:50px;

      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
}



 
    
    .icon-one:before,
   .icon-one:after {
      content: '';
      position: absolute;
      border-bottom: 30px solid red;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      top: 30px;
      left: 20px;
      transform: rotate(-140deg);
    }
    
    .icon-four:before,
   .icon-four:after {
      content: '';
      position: absolute;
      border-bottom: 30px solid yellow;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      top: 30px;
      left: 20px;
      transform: rotate(-140deg);
    }
    
    
    
     
    .icon-three:before,
   .icon-three:after {
      content: '';
      position: absolute;
      border-bottom: 30px solid blue;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      top: 30px;
      left: 20px;
      transform: rotate(-140deg);
    }
    
    .icon-two:before,
   .icon-two:after {
      content: '';
      position: absolute;
      border-bottom: 30px solid green;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      top: 30px;
      left: 20px;
      transform: rotate(-140deg);
    }
.icon-one{background: red;}
.icon-two{background:  green;}
.icon-three{background: blue;}
.icon-four{background:  yellow;}

<div  class="icon-one"><br>One</div>
<div class="icon-two"><br>Two</div>
<div  class="icon-three"><br>Three</div>
<div  class="icon-four"><br>Four</div>

还有这个

.container {
  display:     inline-block;
  width:       64px;
  height:      64px;
  perspective: 700px;
}
.icon, .icon-one, .icon-two{
  position:   absolute;
  height:     inherit;
  width:      inherit;
  transition: all .5s;
  transform-style:     preserve-3d;
  backface-visibility: hidden;
   width:50px;
      height:50px;

}

/* ::: FACES */
.icon-one{background: red;}
.icon-two{background:  green;}

/* ::: SETUP FACES */
}
.icon-wrap .icon-one{transform: rotateX(180deg);}
.icon-wrap .icon-two{transform: rotateX(-180deg);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */

.icon-wrap:hover .icon{ transform: rotateX(180deg); }

/* ::: AUTOMATED EFFECTS */

.icon-wrap .icon{
  animation: icon-wrap 5s 1s infinite alternate ease-in-out;
  -webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}



@keyframes icon-wrap {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(180deg); }
}
@-webkit-keyframes icon-wrap {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(180deg); }
}

<div class="container icon-wrap">
  <div class="icon">
    <div class="icon-one"> One</div>
    <div class="icon-two"> Two</div>
  </div>
</div>

查看此内容：https://davidwalsh.name/css-flip

这是How to Flip the div in time intervals