CSS 動畫翻轉時鍾

Question

我在制作翻轉時鍾動畫時遇到問題

動畫將像此參考一樣執行

參考： http : //hilios.github.io/jQuery.countdown/

到目前為止，這是我的工作。

演示： https : //jsfiddle.net/s3qk25m7/1

我試試這個：

HTML :

<div class="time">
  <span class="count top flipTop">2</span>
    <span class="count top">1</span>
    <span class="count bottom flipBottom">1</span>
  <span class="count bottom">2</span>
</div>

CSS :

.time {position: relative; height: 95px; width: 65px;
  perspective: 200px; backface-visibility: hidden;
  transform: translateZ(0); transform: translate3d(0,0,0);
}
.count {background: #202020; color: #f8f8f8; display: block;
  font-size: 2em; line-height: 2.4em; overflow: hidden;
  position: absolute; text-align: center;
  top: 0; width: 100%;
}
.top {height: 50%; line-height:95px; transform-origin: 50% 100%; }
.bottom {line-height: 0; height: 50%; top: 50%; transform-origin: 50% 0; }

@keyframes flipTop {
  from {
      transform: rotateX(0deg);
  }
  to {
      transform: rotateX(-90deg);
  }
}
@keyframes flipBottom {
    from {
        transform: rotateX(90deg);
    }
    to {
        transform: rotateX(0deg);
    }
}

.flipTop {
    animation-name: flipTop;
    animation-duration: 0.25s;
    animation-fill-mode: both;
}
.flipBottom {
    animation-name: flipBottom;
    animation-duration: 0.25s;
     animation-delay: 0.25s;
    animation-fill-mode: both;
}

動畫無法正常工作。 如何解決這個問題？

我的代碼有什么問題？

提前致謝...

Answer 1

問題是動畫 div 在靜態后面。

要解決此問題，請將z-index: 1添加到您的.flipPosition類。

看看這個更新的小提琴

編輯：請注意，較低的 div 數字似乎更新得太早了

編輯 2：我剛剛意識到ngAnimateSwap可能是完美的！