[英]CSS3 Animations Buggy/Blinky
因此,我正在以下站点上工作: http : //superfy.me,并且在路由之间有CSS3过渡(当前仅适用于Chrome)。 基本上,为了执行动画,我执行以下操作:
.preanimate
类,该类将逐步淘汰div旋转到rotateY(0deg)
,将逐步淘汰div rotateY(180deg)
到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);
}
因此,我遇到以下问题:
在3D模式下移动共面物体时,这通常是一个问题。
设置为:
.row {
-webkit-transform: translateZ(1px);
}
它使行位于父级之上,并解决了问题
顺便说一下,很酷的页面!
您可以添加关键帧以制作动画。 您可以在这里查看。
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.