CODEWITHSUNDEEP
javascriptjquerycsscss-transitionscss-animations
chrislondon
chrislondon

Reputation: 12041

CSS3 Animations Buggy/Blinky

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

Upvotes: 0

Views: 271

Answers (2)

vals
vals

Reputation: 64254

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 !

Upvotes: 2

triangulito
triangulito

Reputation: 202

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

Upvotes: 1

Related Questions