무한 CSS3 애니메이션이 시간이 지남에 따라 임의로 멈추거나 버그가 발생합니다.

Question

연기 효과가 있다고 가정합니다. 코드는 다음과 같습니다. iPad에서는 애니메이션이 임의로 멈추거나 버그가 발생합니다. 데스크톱 크롬/파이어 폭스/사파리에서 몇 분 동안 웹 페이지에있는 경우 애니메이션이 멈추거나 버그가 발생할 수 있습니다. 왜 모든 것이 무한히 설정되어 있는지 확신 할 수 없습니다. 코드는 다음과 같습니다. 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?