Currently, I am developing a website at . One of the features I have implemented is CSS3 transitions for route changes, but this feature only works in Chrome. Here's how the animation works:
- I apply the
.preanimateclass to rotate the phasing out div withrotateY(0deg)and the phasing in div withrotateY(180deg) - Next, I add the
.animateclass, which includes-webkit-transition: -webkit-transform 0.5s; - Then, I remove the
.preanimateclass to eliminate the rotated transforms
This is the CSS code being used:
#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);
}
However, I am encountering some issues:
- Some of the content within the div blinks or becomes invisible during the transition
- After multiple view rotations, the phasing in div stops working properly