CSS3动画Buggy / Blinky

Question

So I'm working on this site: http://superfy.me and I have CSS3 transitions (currently only for Chrome) between the routes. Basically to perform the animation I do the following:

1. Add the .preanimate class which rotates the phasing out div to rotateY(0deg) and the phasing in div to rotateY(180deg)
2. I add the .animate class which adds the -webkit-transition: -webkit-transform 0.5s;
3. I remove the .preanimate class which removes the rotated transforms

This is the 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);
}

So I'm experiencing the following issues:

1. Some of the div content blinks a bunch or isn't visible until it ends
2. After rotating views for a while the phasing in div stops working

Answer 1

It's an usual problem when moving coplanar things in 3D.

Set that:

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

It makes the row stand above the parent, and solves the issue

Cool page, by the way !

Answer 2

You can add keyframes to make the animation. You can check it out here.

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