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

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

Lors de l'utilisation d'animations CSS3 pour mettre à l'échelle un élément positionné absolument au centre d'un autre élément, le l'animation résultante peut apparaître décentrée. Cet écart se produit car l'animation remplace la translation initiale qui centre l'élément.

Pour résoudre ce problème et garantir que l'origine reste centrée pendant l'animation à l'échelle, il est crucial de :

1. Combinez les transformations : Plutôt que de remplacer la traduction initiale, combinez-la avec la transformation d'échelle au sein de l'animation. Cela permet à l'élément de rester centré tout en étant mis à l'échelle.
2. Spécifiez correctement l'ordre : Faites attention à l'ordre des transformations. La traduction doit précéder la transformation d'échelle pour maintenir l'alignement souhaité.

Exemple mis à jour :

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

.center-point {
  transform: translate(-50%, -50%) scale(0);
}

Avec ces modifications, l'animation de mise à l'échelle conservera correctement la position centrale de l'élément dans le conteneur 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!