随着时间的推移，无限的CSS3动画随机停止或变成越野车

Question

假设是烟雾效果。代码如下。在iPad上，动画将随机停止或变成越野车。在桌面chrome / firefox / safari上，如果您在网页上停留几分钟，动画可能会停止或变成错误。我不确定为什么因为它都被设置为无限。代码如下。 Jfiddle链接在这里：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;
}

Answer 1

我的直接想法是内存使用情况。经过一番研究后，我找到了另一个关于“堆栈”的问题的链接，可以回答你的问题。事实证明，CSS3动画可以在某些浏览器中使用GPU加速。看看下面的链接，看看是否有帮助。祝你好运。

CSS3 animations and performance: are there any benchmarks?