Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Infinite CSS3 animation randomly stops or becomes buggy over time

Infinite CSS3 animation randomly stops or becomes buggy over time

Problem

It's suppose to be a smoke effect. The code is below. On the iPad, the animation will randomly stop or become buggy. On desktop chrome/firefox/safari, if you are on the webpage for a couple of minutes, the animation may stop or become buggy. I'm not sure why as it is all set to infinite. The code is below. Jfiddle link is here: http://jsfiddle.net/44u23/

.smoke,.smoketwo,.smokethree {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    position: absolute;
    z-index: 0;
    width: 1px;
    height: 120px;
    left: 70%;
    bottom: 30px;
}

.smoketwo {
    left: 72.5%;
}

.smokethree {
    left: 75%;
}

.smoke span,.smoketwo span,.smokethree span {
    display: block;
    position: absolute;
    bottom: 35px;
    left: 50%;
    margin-left: -20px;
    height: 0;
    width: 0;
    border: 35px solid rgba(255,255,255,0.6);
    border-radius: 35px;
    left: -14px;
    opacity: 0;
    transform: scale(0.5);
}

.smokethree .s1,.smokethree.s2,.smokethree .s3,.smokethree .s4,.smokethree .s5,.smokethree .s6,.smokethree .s7,.smokethree .s8,.smokethree .s9 {
    margin-left: -15px;
}

.smoke .s1,.smoke .s2,.smoke .s3,.smoke .s4,.smoke .s5,.smoke .s6,.smoke .s7,.smoke .s8,.smoke .s9 {
    margin-left: -25px;
}

@-webkit-keyframes smokeL {
    0% {
        -webkit-transform: scale(0.5) translate(0,0);
        -moz-transform: scale(0.5) translate(0,0);
        -o-transform: scale(0.5) translate(0,0);
        transform: scale(0.5) translate(0,0);
    }

    10% {
        opacity: 1;
        -webkit-transform: scale(0.5) translate(0,15px);
        -moz-transform: scale(0.5) translate(0,15px);
        -o-transform: scale(0.5) translate(0,15px);
        transform: scale(0.5) translate(0,15px);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(0,130px);
        -moz-transform: scale(1) translate(0,130px);
        -o-transform: scale(1) translate(0,130px);
        transform: scale(1) translate(0,130px);
    };
}

@-moz-keyframes smokeL {
    0% {
        -webkit-transform: scale(0.5) translate(0,0);
        -moz-transform: scale(0.5) translate(0,0);
        -o-transform: scale(0.5) translate(0,0);
        transform: scale(0.5) translate(0,0);
    }

    10% {
        opacity: 1;
        -webkit-transform: scale(0.5) translate(0,15px);
        -moz-transform: scale(0.5) translate(0,15px);
        -o-transform: scale(0.5) translate(0,15px);
        transform: scale(0.5) translate(0,15px);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(0,130px);
        -moz-transform: scale(1) translate(0,130px);
        -o-transform: scale(1) translate(0,130px);
        transform: scale(1) translate(0,130px);
    };
}

@-o-keyframes smokeL {
    0% {
        -webkit-transform: scale(0.5) translate(0,0);
        -moz-transform: scale(0.5) translate(0,0);
        -o-transform: scale(0.5) translate(0,0);
        transform: scale(0.5) translate(0,0);
    }

    10% {
        opacity: 1;
        -webkit-transform: scale(0.5) translate(0,15px);
        -moz-transform: scale(0.5) translate(0,15px);
        -o-transform: scale(0.5) translate(0,15px);
        transform: scale(0.5) translate(0,15px);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(0,130px);
        -moz-transform: scale(1) translate(0,130px);
        -o-transform: scale(1) translate(0,130px);
        transform: scale(1) translate(0,130px);
    };
}

@keyframes smokeL {
    0% {
        -webkit-transform: scale(0.5) translate(0,0);
        -moz-transform: scale(0.5) translate(0,0);
        -o-transform: scale(0.5) translate(0,0);
        transform: scale(0.5) translate(0,0);
    }

    10% {
        opacity: 1;
        -webkit-transform: scale(0.5) translate(0,15px);
        -moz-transform: scale(0.5) translate(0,15px);
        -o-transform: scale(0.5) translate(0,15px);
        transform: scale(0.5) translate(0,15px);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(0,130px);
        -moz-transform: scale(1) translate(0,130px);
        -o-transform: scale(1) translate(0,130px);
        transform: scale(1) translate(0,130px);
    };
}

@-webkit-keyframes smokeR {
    0% {
        -webkit-transform: scale(0.5) translate(0,0);
        -moz-transform: scale(0.5) translate(0,0);
        -o-transform: scale(0.5) translate(0,0);
        transform: scale(0.5) translate(0,0);
    }

    10% {
        opacity: 1;
        -webkit-transform: scale(0.5) translate(0,15px);
        -moz-transform: scale(0.5) translate(0,15px);
        -o-transform: scale(0.5) translate(0,15px);
        transform: scale(0.5) translate(0,15px);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(5px,130px);
        -moz-transform: scale(1) translate(5px,130px);
        -o-transform: scale(1) translate(5px,130px);
        transform: scale(1) translate(5px,130px);
    };
}

@-moz-keyframes smokeR {
    0% {
        -webkit-transform: scale(0.5) translate(0,0);
        -moz-transform: scale(0.5) translate(0,0);
        -o-transform: scale(0.5) translate(0,0);
        transform: scale(0.5) translate(0,0);
    }

    10% {
        opacity: 1;
        -webkit-transform: scale(0.5) translate(0,15px);
        -moz-transform: scale(0.5) translate(0,15px);
        -o-transform: scale(0.5) translate(0,15px);
        transform: scale(0.5) translate(0,15px);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(5px,130px);
        -moz-transform: scale(1) translate(5px,130px);
        -o-transform: scale(1) translate(5px,130px);
        transform: scale(1) translate(5px,130px);
    };
}

@-o-keyframes smokeR {
    0% {
        -webkit-transform: scale(0.5) translate(0,0);
        -moz-transform: scale(0.5) translate(0,0);
        -o-transform: scale(0.5) translate(0,0);
        transform: scale(0.5) translate(0,0);
    }

    10% {
        opacity: 1;
        -webkit-transform: scale(0.5) translate(0,15px);
        -moz-transform: scale(0.5) translate(0,15px);
        -o-transform: scale(0.5) translate(0,15px);
        transform: scale(0.5) translate(0,15px);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(5px,130px);
        -moz-transform: scale(1) translate(5px,130px);
        -o-transform: scale(1) translate(5px,130px);
        transform: scale(1) translate(5px,130px);
    };
}

@keyframes smokeR {
    0% {
        -webkit-transform: scale(0.5) translate(0,0);
        -moz-transform: scale(0.5) translate(0,0);
        -o-transform: scale(0.5) translate(0,0);
        transform: scale(0.5) translate(0,0);
    }

    10% {
        opacity: 1;
        -webkit-transform: scale(0.5) translate(0,15px);
        -moz-transform: scale(0.5) translate(0,15px);
        -o-transform: scale(0.5) translate(0,15px);
        transform: scale(0.5) translate(0,15px);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1) translate(5px,130px);
        -moz-transform: scale(1) translate(5px,130px);
        -o-transform: scale(1) translate(5px,130px);
        transform: scale(1) translate(5px,130px);
    };
}

.smoke .s0,.smoketwo .s0,.smokethree .s0 {
    -webkit-animation: smokeL 10s 0s infinite;
    -moz-animation: smokeL 10s 0s infinite;
    -o-animation: smokeL 10s 0s infinite;
    animation: smokeL 10s 0s infinite;
}

.smoke .s1,.smoketwo .s1,.smokethree .s1 {
    -webkit-animation: smokeR 10s 1s infinite;
    -moz-animation: smokeR 10s 1s infinite;
    -o-animation: smokeR 10s 1s infinite;
    animation: smokeR 10s 1s infinite;
}

.smoke .s2,.smoketwo .s2,.smokethree .s2 {
    -webkit-animation: smokeL 10s 2s infinite;
    -moz-animation: smokeL 10s 2s infinite;
    -o-animation: smokeL 10s 2s infinite;
    animation: smokeL 10s 2s infinite;
}

.smoke .s3,.smoketwo .s3,.smokethree .s3 {
    -webkit-animation: smokeR 10s 3s infinite;
    -moz-animation: smokeR 10s 3s infinite;
    -o-animation: smokeR 10s 3s infinite;
    animation: smokeR 10s 3s infinite;
}

.smoke .s4,.smoketwo .s4,.smokethree .s4 {
    -webkit-animation: smokeL 10s 4s infinite;
    -moz-animation: smokeL 10s 4s infinite;
    -o-animation: smokeL 10s 4s infinite;
    animation: smokeL 10s 4s infinite;
}

.smoke .s5,.smoketwo .s5,.smokethree .s5 {
    -webkit-animation: smokeR 10s 5s infinite;
    -moz-animation: smokeR 10s 5s infinite;
    -o-animation: smokeR 10s 5s infinite;
    animation: smokeR 10s 5s infinite;
}

.smoke .s6,.smoketwo .s6,.smokethree .s6 {
    -webkit-animation: smokeL 10s 6s infinite;
    -moz-animation: smokeL 10s 6s infinite;
    -o-animation: smokeL 10s 6s infinite;
    animation: smokeL 10s 6s infinite;
}

.smoke .s7,.smoketwo .s7,.smokethree .s7 {
    -webkit-animation: smokeR 10s 7s infinite;
    -moz-animation: smokeR 10s 7s infinite;
    -o-animation: smokeR 10s 7s infinite;
    animation: smokeR 10s 7s infinite;
}

.smoke .s8,.smoketwo .s8,.smokethree .s8 {
    -webkit-animation: smokeL 10s 8s infinite;
    -moz-animation: smokeL 10s 8s infinite;
    -o-animation: smokeL 10s 8s infinite;
    animation: smokeL 10s 8s infinite;
}

.smoke .s9,.smoketwo .s9,.smokethree .s9 {
    -webkit-animation: smokeR 10s 9s infinite;
    -moz-animation: smokeR 10s 9s infinite;
    -o-animation: smokeR 10s 9s infinite;
    animation: smokeR 10s 9s infinite;
}
Problem courtesy of: VPNTIME

Solution

My immediate thought was memory usage. After a little research I found a link to another question on "stack" that may answer your question. As it turns out, CSS3 animations can utilize GPU acceleration in certain browsers. Check out the link below and see if that helps. Good luck to you.

CSS3 animations and performance: are there any benchmarks?

Solution courtesy of: Joshua Fort

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Infinite CSS3 animation randomly stops or becomes buggy over time

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×