Wie halte ich ein Element während CSS3-Skalierungsanimationen zentriert?

Beibehalten des zentrierten Ursprungs während der CSS3-Skalierungsanimation

In CSS3-Animationen kann die Skalierung eines Elements manchmal dazu führen, dass es bei der Transformation außermittig ist Die Eigenschaft -origin ist nicht richtig konfiguriert. So beheben Sie dieses Problem und stellen sicher, dass das Element während der gesamten Animation zentriert bleibt.

Der Schlüssel zur Beibehaltung des zentrierten Ursprungs besteht darin, die ursprüngliche Übersetzung (d. h. den Mittelpunkt) in die Transformationseigenschaft der Animation einzubeziehen . Dies liegt daran, dass die Anwendung einer neuen Transformation alle vorherigen überschreibt. Durch das Hinzufügen der Übersetzung behalten wir die Anfangsposition des Elements bei.

Hier ist der angepasste CSS-Code:

@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 */
}

Mit dieser Anpassung behält das Element seine zentrierte Position während der Skalierungsanimation bei und stellt so sicher dass der Ursprung (blaues Quadrat) mit der Mitte des anderen Containers (rotes Quadrat) ausgerichtet bleibt.

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