javascript - Why does using animation-defer or setimeout to delay cause animation to be stuck, while not using delay is very smooth?

Question

1. Why does using animation-defer or setimeout to delay cause animation lag, but not using delay is very smooth. I am moving an 800k picture. Its lag does not mean that it will always be stuck. For example, if the following animation: moveup 0.9s ease-in-out forwards; changes to animation: moveup 0.9s ease-in-out forwards 0.4s;, will it get stuck at about 0.5s?
2.

黄舟 · Answer

CSS You added translateZ(0) to enable hardware acceleration. This part is actually stuck, but it is when the page loads CSS, so there will be no lag when playing; you can understand that the animation has a preset The loading process occurs during the process of returning the result after the browser renderer delivers it to the hardware for calculation (you can use two immobile animation solutions, JS uses timeout and does not use timeout, check the memory visibility; of course, the animation is complicated ＼The memory gap between the two will be obvious only if the format is particularly large). However, your JS control artificially delays the preloading process, and calculates the delayed animation separately from the current animation, and some calculations are performed. Large amounts (shadows and transparency) will cause obvious flickering, frame skipping, and even lag;

Of course, there is another extreme example: the mixing of transform, transition, and animation... When switching between two animations, you need to switch the preloaded animation process, and the above situation will also occur;

Sorry for talking too much; PS: chrome, FF, and IE10 already support w3c standard writing;

.content-up--img{
   position: absolute;
   top: 0;
   right:0;
   z-index: 15;
}
.content-up--img.J_trans{
   transform: translateZ(0);
   backface-visibility: hidden;
   perspective: 1000;
}
.content-up--img.J_end{
   animation: moveup 0.9s ease-in-out;
}
@keyframes moveup {
 0%{
      transform: translateX(0);
  }
  60%{
      transform: translateX(-32px);
  }
  100%{
      transform: translateX(-100%);
  }
}