javascript - Warum führt die Verwendung von „animation-defer“ oder „setimeout“ zur Verzögerung dazu, dass die Animation hängenbleibt, während die Nichtverwendung von „delay“ sehr flüssig ist?

Question

1. Warum verursacht die Verwendung von „animation-defer“ oder „setimeout“ eine Verzögerung bei der Animation, aber ohne die Verwendung einer Verzögerung läuft es sehr flüssig, und die Verzögerung bedeutet nicht, dass es immer hängen bleibt Folgende Animation: Bewegung nach oben 0,9 Sekunden, leichtes Ein-Aus nach vorne; Änderungen an der Animation: Bewegung nach oben 0,9 Sekunden, leichtes Ein-Aus nach vorne 0,4 Sekunden; wird es bei etwa 0,5 Sekunden hängen bleiben?
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);
  }
}

Der Hauptcode ist das obige CSS. Verwenden Sie später js, um den Klassennamen hinzuzufügen, um den Zweck zu erreichen

3. Beim Testen auf dem Mobiltelefon kommt es zu Verzögerungen, aber auf dem Computer gibt es keine Fehlermeldung. Das heißt, wenn keine Verzögerung hinzugefügt wird, kann die Animation sehr reibungslos ablaufen Wird auf der zusätzlichen Verzögerungszeit basieren, 0,4 s oder 0,6 s usw. Versuchen Sie, in verschiedenen Positionen stecken zu bleiben. Dies ist kein Problem, wenn es auf einem Computer getestet wird, aber es wird stecken bleiben, wenn es auf einem Mobiltelefon getestet wird Telefon ist Android.

4. Ich habe am Computer nach verschiedenen Antworten gesucht, um
/a/11... zu optimieren,
Ich habe ursprünglich left verwendet, aber später habe ich es geändert und gelernt, transform zu verwenden

5. Das Endergebnis ist

Es sieht so aus, als gäbe es kein Problem, es gibt keine rote Farbe, ich möchte wissen, was der mögliche Grund ist

Answer 1

CSS您添加了translateZ(0)开启了硬件加速，这块其实也卡了，不过是在页面加载CSS时候，所以播放的时候不会有感觉卡顿；您可以理解成，动画是有一个预载入过程的，发生在由浏览器呈现器交付给硬件计算后返回结果这个过程中（您可以由两种不动的动画方案,JS使用timeout与不使用Timeout，检查内存可见；当然，动画复杂＼幅面特别大才会显著的看出两者的内存差距），但是，您JS控制，就人为的延后了预载入的过程，把延迟的动画与当前动画分离计算，一些跑计算量大的（阴影与透明）就会明显的闪动，跳帧，甚至卡顿；

当然，还有另一个极端的例子：就是transform,transition,animation混用...两个动画切换的时候，需要切换预载入的动画过程，也会发生以上情况；

抱歉，话多了；PS:chrome和FF,IE10已经支持w3c标准写法了;

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