CSS3 动画 Buggy/Blinky答案

【问题标题】：CSS3 Animations Buggy/BlinkyCSS3 动画 Buggy/Blinky
【发布时间】：2013-09-18 01:50:14
【问题描述】：

所以我在这个网站上工作：http://superfy.me 并且我在路由之间有 CSS3 转换（目前仅适用于 Chrome）。基本上要执行动画，我会执行以下操作：

添加 .preanimate 类，该类将逐步淘汰的 div 旋转到 rotateY(0deg)，将 div 中的逐步旋转到 rotateY(180deg)
我添加了 .animate 类，该类添加了 -webkit-transition: -webkit-transform 0.5s;
我删除了删除旋转变换的 .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);
}

所以我遇到了以下问题：

某些 div 内容会闪烁一串或直到结束才可见
旋转视图一段时间后，div 中的分阶段停止工作

【问题讨论】：

我承认这个问题超出了我的范围，所以我不会尝试回答它，但我可能会建议transit.js。如果您使用的是 jQuery，它添加了一种使用 CSS 过渡的简单方法。只需以与使用 .animate() 相同的方式使用它，在移动设备上也能出色地工作。只是一个建议:)

标签： javascript jquery css css-transitions css-animations

【解决方案1】：

在 3D 中移动共面物体时，这是一个常见的问题。

设置：

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

它使行站在父级之上，并解决了问题

顺便说一句，页面很酷！

【讨论】：

【解决方案2】：

您可以添加关键帧来制作动画。你可以在这里查看。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

【讨论】：

酷，我会调查的！