CSS3動畫Buggy / Blinky

Question

因此，我正在以下站點上工作： http : //superfy.me，並且在路由之間有CSS3過渡（當前僅適用於Chrome）。 基本上，為了執行動畫，我執行以下操作：

1. 添加.preanimate類，該類將逐步淘汰div旋轉到rotateY(0deg) ，將逐步淘汰div rotateY(180deg)到rotateY(180deg)
2. 我添加了.animate類，它添加了-webkit-transition: -webkit-transform 0.5s;
3. 我刪除了.preanimate類，它刪除了旋轉的變換

這是CSS：

#container,
 #animate-container {
   position: absolute;
   top: 70px;
   width: 100%;
   height: 100%;
   -webkit-transform-style: preserve-3d;
   -webkit-backface-visibility: hidden;
 }

#animate-container.preanimate,
#container {
  -webkit-transform: rotateY(0deg);
}
#animate-container {
  -webkit-transform: rotateY(-180deg);
}

.animate {
  -webkit-transition: -webkit-transform 0.5s;
}

#container.preanimate {
  -webkit-transform: rotateY(180deg);
}

#animate-container div,
#container div {
  -webkit-backface-visibility: hidden;
  -webkit-transform:translate3d(0,0,0);
}

因此，我遇到以下問題：

1. 某些div內容閃爍一堆或直到結束才可見
2. 旋轉視圖一段時間后，div的逐步停止工作

Answer 1

在3D模式下移動共面物體時，這通常是一個問題。

設置為：

.row {
    -webkit-transform: translateZ(1px);
}

它使行位於父級之上，並解決了問題

順便說一下，很酷的頁面！

Answer 2

您可以添加關鍵幀以制作動畫。 您可以在這里查看。

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations