Javascript 倒数计时器css分析

我正在尝试了解更多关于前端web开发的信息，并尝试查看我在web上找到的不同酷元素的页面源。我偶然发现，并试图了解他们是如何做的倒数计时css。我只理解html的一部分，我已经找到了它们保存示例的地方：

<div class="countdown-container" id="main-example">

---

如果我能够在jsfiddle中复制它，会更加清晰，但我不能。任何洞察都将不胜感激。

要实现这种向下翻转效果，您可以使用css动画或过渡

下面让我们快速了解一下如何使用css动画减去样式。转换的工作方式类似，但需要更改状态，例如：hover

下面是一个示例：

---

注意：我只为chrome添加了前缀，因此您应该使用chrome打开它或添加其他前缀。

您可以在此处查看文档：为什么不使用Firebug并亲自查看一下？

@-webkit-keyframes flip-top {
  0% {
    transform: rotateX(0deg);
    transform-origin: 50% 100%;
  }
  50% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(-90deg);
    transform-origin: 50% 100%;
  }
}
@-webkit-keyframes flip-bottom {
  0% {
    transform: rotateX(-90deg);
    transform-origin: 100% 0%;
  }
  50% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: 100% 0%;
  }
}.top.curr {
  z-index: 1;
  -webkit-animation: flip-top 2s ease-in infinite;
}

.top.next {
  z-index: 0;
}

.bottom.curr {
  z-index: 0;
}

.bottom.next {
  z-index: 1;
  -webkit-animation: flip-bottom 2s ease-out infinite;
}