A brief discussion on whether CSS animation will be blocked by JS

The animation part of CSS will be blocked by JS, but the animation of transform will not be affected.

Here is a performance chart of the margin-left moving animation with js blocking animation enabled.

<style>
.walkabout-old-school {
  animation: 3s slide-margin linear infinite;
}
 
@keyframes slide-margin {
  from {margin-left: 0;}
  50% {margin-left: 100%;}
  to {margin-left: 0;}
}
</style>
<script>
function kill() {
  var start = +new Date;
  while (+new Date - start < 2000){}
}
</script> 

In the above figure, it can be clearly seen that after running the kill method, the animation stagnates for 2 seconds before continuing.

From the above figure, we can see that within 2 seconds of enabling js, the rendering process will wait until the kill function is executed before executing. Looking at the figure below, we can see that changes in margin will cause the DOM to be re-layouted, and the layout will not start until the kill function is executed. will lead to

Then look at the elements that use transform as animation

.walkabout-new-school {
  animation: 3s slide-transform linear infinite;
}
@keyframes slide-transform {
  from {transform: translatex(0);}
  50% {transform: translatex(300px);}
  to {transform: translatex(0);}
}

The following figure is a running comparison chart (blue is margin, green is transform)

From the above figure, we can see that the use of transform is not affected by the kill method at all. Let's take a look at the debugging chart

It can be seen here that margin will frequently trigger page reflow, while transform will not, and js blocks page reflow. So the margin animation will get stuck.

Therefore, when using animation in daily life, using transform more often can achieve the best page performance and effects.

This is the end of this article on whether CSS animation will be blocked by JS. For more relevant content about CSS animation being blocked by JS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!