javascript - Pourquoi l'utilisation d'animation-defer ou de setimeout pour retarder provoque-t-elle le blocage de l'animation, alors que ne pas utiliser de retard est très fluide?

Question

1. Pourquoi l'utilisation d'animation-defer ou de setimeout pour retarder provoque-t-elle un décalage d'animation, mais ne pas utiliser de retard est très fluide. Je déplace une image de 800 000 octets. Son décalage ne signifie pas qu'elle sera toujours bloquée. Par exemple, lorsque l'animation suivante. : moveup 0,9s facilité d'entrée-sortie vers l'avant ; changements dans l'animation : moveup 0,9s facilité d'entrée-sortie vers l'avant 0,4s ;, il restera bloqué à environ 0,5s ?
2.

黄舟 · Answer

CSS Vous avez ajouté TranslateZ(0) pour activer l'accélération matérielle. Cette partie est en fait bloquée, mais c'est lorsque la page charge CSS, il n'y aura donc pas de décalage lors de la lecture. processus de préchargement, qui se produit pendant le processus de renvoi du résultat après que le moteur de rendu du navigateur l'a transmis au matériel pour le calcul (vous pouvez vérifier la visibilité de la mémoire à partir de deux schémas d'animation immobiles, JS utilisant le délai d'attente et n'utilisant pas le délai d'attente ; bien sûr, l'espace mémoire entre les deux ne sera évident que lorsque l'animation est complexe et que le format est particulièrement grand), cependant, votre contrôle JS retarde artificiellement le processus de préchargement, et sépare l'animation retardée de l'animation actuelle. (ombre et transparence) scintillera évidemment, sautera des images ou même se figera

;

Bien sûr, il existe un autre exemple extrême : le mélange de transformation, de transition et d'animation... Lorsque vous basculez entre deux animations, vous devez changer le processus d'animation préchargé, et la situation ci-dessus se produira également #🎜 ; 🎜#

Désolé, j'ai trop parlé ; PS : Chrome, FF et IE10 prennent déjà en charge l'écriture standard du 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%);
  }
}