Wie zentriert man ein Bild während CSS-Skalierungsanimationen?

So halten Sie die Bildmitte beim Skalieren konstant

Beim Skalieren eines Elements mithilfe einer CSS-Animation ist die Beibehaltung einer zentrierten Position von entscheidender Bedeutung. In bestimmten Szenarien kann sich das skalierte Element jedoch aus der Mitte verschieben, wie in der bereitgestellten Geige dargestellt.

Das zugrunde liegende Problem entsteht dadurch, dass die Animation die ursprüngliche Übersetzungstransformation überschreibt. Wenn Sie eine neue Transformation innerhalb der Animation angeben, verdunkelt diese die anfängliche Positionierung und entfernt die notwendige Übersetzung für die Mittelausrichtung.

Um dies zu korrigieren, ist es wichtig, beide Transformationen innerhalb derselben Eigenschaft zu kombinieren und dabei die richtige Reihenfolge sicherzustellen: initial Übersetzung gefolgt von der Skalierungsanimation. Der aktualisierte Codeausschnitt unten veranschaulicht diesen Ansatz:

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

Durch die Einhaltung dieser Reihenfolge bleibt das Element während der gesamten Skalierungsanimation genau zentriert und behält seine beabsichtigte Position relativ zu seinem übergeordneten Element bei.

Das obige ist der detaillierte Inhalt vonWie zentriert man ein Bild während CSS-Skalierungsanimationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!