我终于解决了.经过一番研究，我发现关于Web Worker的知识很多，只是发现它不是正确的解决方案.无论如何，它与javascript的工作方式有关. Javascript是单线程的，因此是阻塞的.因此，当我们执行一些需要花费一些时间的任务(在我的情况下是一秒钟左右)时，我们在屏幕上看到的所有内容都会冻结，甚至css动画也是如此！它确实取决于您使用的浏览器.就我而言，我使用的是Chrome.我测试了它的Firefox，动画没有停止.

I finally solved it. After some research, I learned a lot about web workers just to find out it was not the right solution. Anyways, it has to do on how javascript works. Javascript is single threaded and thus blocking. So when we have some task that takes some time (in my case was a second or so) everything we seen on screen will freeze, even css animations! It does depend on what browser you are using. In my case, i was using Chrome. I tested it firefox and the animations did not stop.

我们去解决问题.我注意到Chrome在转换方面存在一些问题，尤其是一些基本的CSS元素，例如top，right，bottom，left，margin ...，因此我不得不进行转换.并非所有转换都可以.例如，翻译百分比不起作用，因此我不得不使用像素.为此，我需要计算父元素的宽度并进行一些计算，以便能够将我的子元素在X轴上从屏幕的左侧向右侧平移.

Let's go to the solution. I noticed that Chrome has some issues with transitions, specially with some basic css elements such as top, right, bottom, left, margins... so i had to go with transforms. Not all transforms will work either. For example, translate percentages won't work, so I had to use pixels. For this, i needed to calculate the width of the parent element and do some calculations to be able to translate my child element on the X axis from the left to the right of the screen.

我将用实际代码更新此帖子.

I will update this post with the actual code.