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

So behalten Sie den Mittelpunktursprung während der Skalierungsanimation bei

Wenn Sie CSS3-Animationen verwenden, um ein Element zu skalieren, das absolut in der Mitte eines anderen Elements positioniert ist, wird das Die resultierende Animation erscheint möglicherweise außermittig. Diese Diskrepanz entsteht, weil die Animation die anfängliche Übersetzung überschreibt, die das Element zentriert.

Um dieses Problem zu beheben und sicherzustellen, dass der Ursprung während der Skalierungsanimation zentriert bleibt, ist es wichtig:

1. Kombinieren Sie die Transformationen: Anstatt die ursprüngliche Übersetzung zu überschreiben, kombinieren Sie sie mit der Skalierungstransformation innerhalb der Animation. Dadurch bleibt das Element zentriert und skaliert gleichzeitig.
2. Geben Sie die Reihenfolge richtig an: Achten Sie auf die Reihenfolge der Transformationen. Die Übersetzung muss der Skalierungstransformation vorausgehen, um die gewünschte Ausrichtung beizubehalten.

Aktualisiertes Beispiel:

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

Mit diesen Änderungen wird die Skalierungsanimation korrekt beibehalten die Mittelposition des Elements innerhalb des übergeordneten Containers.

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