Jquery 使用CSS动画/变换。我怎样才能上下翻转一个div，然后上下翻转第二个div并暂停+；环

我有一个关于CSS动画/变换的问题。我想从底部翻转一个div作为原点，向上翻转，然后向下翻转。之后，另一个div向上翻转，然后再向下翻转。在两个div之间无限重复这个过程，这样它们就不会同时翻转

注意：我尝试过使用动画延迟，而使用0%{…}20%，100%{…}的css动画技巧似乎仍然无法满足我的要求

编辑：这里有一个关于我正在尝试做什么的js fiddle链接。这就是我面临的问题

快速更新：这里有一个GIF，可以直观地看到我的意思和我试图实现的目标

一个
两个
`.集装箱{
位置：相对位置；
.图标包装{
位置：相对位置；
宽度：50px；
高度：50px；
溢出：隐藏；
透视图：1000px；
.图标{
位置：绝对位置；
宽度：50px；
高度：50px；
}
.图标一{
背景：红色；
变换原点：底部；
变换样式：保留-3d；
动画：3s翻转2s无限线性；
}
.图标二{
背景：蓝色；
变换原点：底部；
变换样式：保留-3d；
动画：3s翻转无限线性；
}
}
}`
`@关键帧翻转{
0% {
变换：rotateX（180度）
}
14% {
变换：旋转（0度）；
}
100% {
变换：旋转（0度）；
}
}`

试试这个：

var a=document.querySelectorAll（'div'）；
a=Array.prototype.slice.call（a）；
风险值计时={
放松：“放松进入”，
迭代：无限，
方向：'交替'，
填充：'两个'
}
a、 forEach（功能（el、i、ra）{
timings.delay=i*2400；
计时。持续时间=5000；
动画片([
{transform:'rotateX（180度）}，
{变换：'rotateX（-180deg）}
]，时间安排）；
计时。持续时间=7500；
动画片([
{不透明度：1}，
{不透明度：0}
]，时间安排）；
计时。持续时间=10000；
});
$background:#e45349；
$light:#efefff；
身体{
背景：$背景；
显示器：flex；
证明内容：中心；
}
div{
显示：内联块；
位置：绝对位置；
身高：继承；
文本对齐：居中；
宽度：继承；
变换样式：保留-3d；
背面可见性：隐藏；
宽度：70px；
高度：50px；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
}
.图标一：之前，
.图标一：之后{
内容：''；
位置：绝对位置；
边框底部：30px实心红色；
左边框：10px实心透明；
右边框：10px实心透明；
顶部：30px；
左：20px；
变换：旋转（-140度）；
}
.图标四：之前，
.图标四：之后{
内容：''；
位置：绝对位置；
边框底部：30px实心黄色；
左边框：10px实心透明；
右边框：10px实心透明；
顶部：30px；
左：20px；
变换：旋转（-140度）；
}
.图标三：之前，
.图标三：之后{
内容：''；
位置：绝对位置；
边框底部：30px纯蓝色；
左边框：10px实心透明；
右边框：10px实心透明；
顶部：30px；
左：20px；
变换：旋转（-140度）；
}
.图标二：之前，
.图标二：之后{
内容：''；
位置：绝对位置；
边框底部：30px纯绿色；
左边框：10px实心透明；
右边框：10px实心透明；
顶部：30px；
左：20px；
变换：旋转（-140度）；
}
.icon一{背景：红色；}
.icon二{背景：绿色；}
.icon三{背景：蓝色；}
.icon四{背景：黄色；}

一个

两个

三

四个人已经试过了，看到了那个网站。我有翻转的东西和变换透视的东西。问题是如何让它暂停并再次播放，而不进行任何操作，如悬停/等？比如让它自动循环？很抱歉，这对我来说有点难以解释，但我在我的网站上有一个在谷歌chrome上的iphone 5s的视窗。只需更改转换：0.6s；时间，非常接近。现在的问题是我有4个分区，我想翻转。我希望每一个div都是从180度开始翻转到0度，然后180度，同时它有不同的间隔或计时。所以每个人轮流翻筋斗看这个：还有这个感恩者！我制作了一个gif，所以我将把它贴在这里，以便更容易直观地看到我在说什么。但这些都非常接近我想要的。添加工作示例刚刚添加了一个工作示例。只需在代码中更改此：
动画：3s flip 2s infinite linear
为
动画：5s flip 5s infinite linear
我已经更新了它。
<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);
              }
    }`