CSS3 动画错误/眨眼

CSS3 Animations Buggy/Blinky

本文关键字：眨眼 错误 动画 CSS3      更新时间：2023-09-26

所以我正在这个网站上工作：http://superfy.me 和我在路由之间有CSS3过渡（目前仅适用于Chrome）。 基本上为了执行动画，我执行以下操作：

  1. 添加 .preanimate 类，该类将逐步淘汰的div 旋转到 rotateY(0deg)将div 中的阶段旋转到 rotateY(180deg)
  2. 我添加了添加-webkit-transition: -webkit-transform 0.5s;的 .animate 类
  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 中的阶段停止工作

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

设置：

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

它使行位于父行之上，并解决了问题

顺便说一下，很酷的页面！

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

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

相关文章：