Pourquoi mon élément mis à l'échelle se décale-t-il pendant l'animation Web et comment puis-je y remédier ?

Comment conserver l'origine de l'image lors d'une animation à l'échelle

Dans les animations Web, lors de la mise à l'échelle d'un élément positionné absolument dans un autre élément, l'élément mis à l'échelle peut décentrer. Cela peut être observé dans les cas où un carré rouge, représentant l'élément mis à l'échelle, s'éloigne du centre (représenté par un carré bleu) pendant l'animation.

Cause du problème

Le problème se pose car la propriété de transformation de l'animation remplace la transformation de traduction précédente. Cela supprime la translation qui maintient l'alignement de l'élément au centre.

Solution

Pour résoudre ce problème, nous devons combiner les transformations dans la même propriété de transformation, en garantissant la ordre correct.

@keyframes ripple_large {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.to-animate {
  transform: translate(-50%, -50%);
}

Explication

Combinaison des Les transformations garantissent que la traduction est conservée tout au long de l'animation, tandis que la transformation d'échelle est appliquée par-dessus. Cela permet à l'élément d'évoluer sans se décentrer. La propriété transform-origin ne joue aucun rôle dans ce cas.

HTML mis à jour :

<div></div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!