Comment garder une image centrée lors des animations de mise à l'échelle CSS3 ?

Comment conserver une image centrée pendant l'animation ?

Dans une situation comme celle présentée dans le violon que vous avez fourni, où une animation CSS3 met à l'échelle un élément à la position absolue d'un autre élément centré au centre, vous pourriez rencontrer un désalignement de l'élément pendant l'animation. Plus précisément, il peut apparaître décentré, comme le démontrent les carrés rouges dans le violon.

Pour remédier à cela, nous pouvons modifier la propriété transform-origin. Le problème survient lorsque la nouvelle transformation (au sein de l'animation) remplace celle d'origine. Dans ce cas, la transformation d'origine sert à maintenir l'alignement centré de l'élément.

Pour contourner ce problème, nous devons combiner les transformations au sein d'une même propriété de transformation, en garantissant le bon ordre. Le code suivant illustre l'approche corrigée :

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

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!