Comment garder un élément centré lors des animations à l'échelle CSS3 ?

Maintenir l'origine centrée lors d'une animation à l'échelle CSS3

Dans les animations CSS3, la mise à l'échelle d'un élément peut parfois conduire à son décentrement si la transformation La propriété -origin n'est pas configurée correctement. Voici comment résoudre ce problème et garantir que l'élément reste centré tout au long de l'animation.

La clé pour préserver l'origine centrée est d'inclure la traduction originale (c'est-à-dire le point central) dans la propriété de transformation de l'animation. . En effet, l'application d'une nouvelle transformation remplace les précédentes. En ajoutant la traduction, nous maintenons la position initiale de l'élément.

Voici le code CSS ajusté :

@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%); /* Maintains the original position */
}

Avec cet ajustement, l'élément conservera sa position centrée pendant l'animation de mise à l'échelle, garantissant que l'origine (carré bleu) reste alignée avec le centre de l'autre conteneur (carré rouge).

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!