没有图像的倒计时翻转效果

Question

我试图用只有文字的翻转效果来设置倒计时动画，但我无法弄明白该怎么做，这就是我的想法：

• 倒计时的每个部分（天，小时，分钟，秒）都有4个div

  • 当前时间
  • 降低当前时间
  • 下次上层
  • 下次降低

  @@@@@
  @ Upper @
  @@@@@
  @ Lower @
  @@@@@

• 然后我想只显示每个div的一半
  • 父级
  上的fixed heights和overflow:hidden
  • 我不知道会对下一个人产生同样的影响
    
• 要设置动画，我想缩小class='active' div的每个部分（上部＆gt;下部）并更新另一部分
• 我还有一些关于如何重置收缩div
的问题

否则我认为在相同位置总是有4个div并运行4个同步动画和1个，但我不知道是否可以做和/或它们是否可能导致一些滞后或闪现“效果：

• 第一层：收缩上部，隐藏下部
• 第二层（同时）：隐藏上半部分
• 然后缩小第二层的下半部分
• 更新（同样class='active'方式）并以某种方式重置

我希望你能理解并解释我哪一个更好并建议我如何解决“空白”点

的修改

JSFiddle