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.

.content-up--img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;

}

.content-up--img.J_trans{
     -webkit-transform: translateX(100%) translateZ(0);
             transform: translateX(100%) translateZ(0);
    -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   perspective: 1000;

}
.content-up--img.J_end{
      -webkit-animation: moveup 0.9s ease-in-out forwards;
     animation: moveup 0.9s ease-in-out forwards;
}
@-webkit-keyframes moveup {

  0%{
     -webkit-transform: translateX(100%) translateZ(0);
             transform: translateX(100%) translateZ(0);
  }
  60%{
      -webkit-transform: translateX(-32px) translateZ(0);
             transform: translateX(-32px) translateZ(0);
  }
  100%{
    -webkit-transform: translateX(0) translateZ(0);
             transform: translateX(0) translateZ(0);
  }
}

@keyframes moveup {
 0%{
     -webkit-transform: translateX(100%) translateZ(0);
             transform: translateX(100%) translateZ(0);
  }
  60%{
      -webkit-transform: translateX(-32px) translateZ(0);
             transform: translateX(-32px) translateZ(0);
  }
  100%{
    -webkit-transform: translateX(0) translateZ(0);
             transform: translateX(0) translateZ(0);
  }
}

The main code is the above css, and later use js to add the class name to achieve the purpose

3. There will be lag when testing on the mobile phone. There is no problem on the computer side. There is no error message. That is, when no delay is added, the animation can proceed smoothly. When adding delay, it will be based on the added delay time, 0.4s. Or 0.6s, etc., and freeze at different positions. This is no problem when tested on a computer, but it will freeze when tested on a mobile phone. My mobile phone is Android.

4. Searched various answers on the computer to optimize
/a/11...,
I originally used left, but later I changed it and learned to use transform

5. The final result is

It looks like there is no problem, there is no red color, I would like to know what the possible reason is

Answer 1

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%);
  }
}