Saturday, 10 August 2013

Unwanted white patches on load

Unwanted white patches on load

I'm getting unwanted white patches/flashes after the site loads. This
problem started only after adding css3 animations to the site.
This is the page that's experiencing the problem
This is majorly experienced in chrome on a windows computer.
Below is how the animations are triggered.
Javascript
$(window).load(function () {
$("#illustrations").css("display", "block");
$("#illustrations").addClass('anim');
});
$(document).ready(function () {
$("#illustrations").css("display", "none");
$("a.transition").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$("#illustrations").removeClass('anim');
$("#illustrations").addClass('reverseAnim');
//window.location = linkLocation;
redirectInverval();
});
function redirectPage() {
$("#illustrations").css("display", "none");
window.location = linkLocation;
}
function redirectInverval() {
setInterval(redirectPage, 1000);
}
});
CSS
.anim {
-webkit-animation:myfirst 1s;
/* Safari and Chrome */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
/*-webkit-backface-visibility: hidden;*/
}
@keyframes myfirst {
0% {
top:-600px;
transform:rotate(30deg);
-webkit-transform: rotate(30deg);
}
50% {
transform:rotate(30deg);
-webkit-transform: rotate(30deg);
}
100% {
top:0px;
}
}
@-webkit-keyframes myfirst
/* Safari and Chrome */
{
0% {
top:-600px;
transform:rotate(30deg);
-webkit-transform: rotate(30deg);
}
50% {
transform:rotate(30deg);
-webkit-transform: rotate(30deg);
}
100% {
top:0px;
}
}
.reverseAnim {
-webkit-animation:myfirstRev 1s;
/* Safari and Chrome */
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-backface-visibility: hidden;
}
@keyframes myfirstRev {
0% {
top:0px;
transform:rotate(30deg);
-webkit-transform: rotate(30deg);
}
50% {
transform:rotate(30deg);
-webkit-transform: rotate(30deg);
}
100% {
top:-600px;
}
}
@-webkit-keyframes myfirstRev
/* Safari and Chrome */
{
0% {
top:0px;
/*-webkit-transform: rotate(30deg);*/
}
50% {
top: 50px;
transform:rotate(10deg);
-webkit-transform: rotate(10deg);
}
100% {
top:-600px;
}
}
Please help me with this.

No comments:

Post a Comment