Comment garder une image centrée pendant les animations de mise à l'échelle CSS ?

Comment garder le centre de l'image constant lors de la mise à l'échelle

Lors de la mise à l'échelle d'un élément à l'aide d'une animation CSS, le maintien d'une position centrée est crucial. Cependant, dans certains scénarios, l'élément mis à l'échelle peut se décentrer, comme illustré dans le violon fourni.

Le problème sous-jacent vient du fait que l'animation remplace la transformation de traduction d'origine. Lors de la spécification d'une nouvelle transformation dans l'animation, elle éclipse le positionnement initial, supprimant la translation nécessaire à l'alignement au centre.

Pour remédier à cela, il est essentiel de combiner les deux transformations au sein de la même propriété, en garantissant le bon ordre : initial traduction suivie de l'animation de mise à l'échelle. L'extrait de code mis à jour ci-dessous illustre cette approche :

@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;
  }
}

En adhérant à cet ordre, l'élément reste centré avec précision tout au long de l'animation à l'échelle, préservant sa position prévue par rapport à son élément parent.

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!