CSS动画忙

Question

我有一个CSS动画和我的js代码，做一些事情，让说遍历我：

for (var i = 0; i < 10000; i++) { 
console.log(i); 
} 

此代码运行握住我的动画。 有没有解决方案？如果不使用GIF

HTML + CSS代码

<div class="progress"> 
    <span></span> 
</div> 

.progress { 
    width: 500px; 
    max-width: 500px; 
    height: 50px; 
    overflow: hidden; 
    > span { 
    display: block; 
    position: relative; 
    height: 100%; 
    width: 200%; 
    transform: translateX(-50%); 
    overflow: hidden; 
    background-color: #4a4a4a; 
    &:after, >span { 
     content: ""; 
     position: absolute; 
     top: 0; left: 0; bottom: 0; right: 0; 
     background-image: linear-gradient(
     -45deg, 
     rgba(#fff, .2) 25%, 
     transparent 25%, 
     transparent 50%, 
     rgba(#fff, .2) 50%, 
     rgba(#fff, .2) 75%, 
     transparent 75%, 
     transparent 
    ); 
     z-index: 1; 
     background-size: 30px 30px; 
     overflow: hidden; 
     -webkit-animation: move 4s linear infinite; 
     -moz-animation: move 4s linear infinite; 
     animation: move 4s linear infinite; 
    } 
    } 
} 

@keyframes move { 
    0% { 
    transform: translateX(0%); 
    } 
    100% { 
    transform: translateX(50%); 
    } 
} 

codepen - css animation

Answer 1

不，这是不可能的。或者至少不是没有重新格式化您的代码。动画卡住的原因是因为渲染页面与其他函数一样。如果你用你的循环嵌套JS堆栈，那么浏览器就不会重新渲染你的屏幕，从而渲染你的动画。

潜在的解决方案：

你可以用0的时候这样做是推动各功能为回调队列使用的setInterval，而不是一个环，它的每个执行堆栈明确的时间。这允许动画呈现时间。你会想是这样的：

var counter = 0; 

var inter = setInterval(function(){ 
if(++counter >= 1000){ 
    return clearInterval(inter); 
} 
console.log(counter); 
},0); 

网络工作者解决方案

您还可以使用网络工作者尝试。 Web Workers API允许您在单独的线程上运行JS进程。这将需要您将JS存储在外部脚本中。