Warum verschiebt sich mein skaliertes Element während der Webanimation aus der Mitte und wie kann ich das beheben?

So behalten Sie den Bildursprung während der Skalierungsanimation bei

Bei Webanimationen wird beim Skalieren eines Elements, das absolut innerhalb eines anderen Elements positioniert ist, möglicherweise das skalierte Element angezeigt außermittig verschieben. Dies kann in Fällen beobachtet werden, in denen sich ein rotes Quadrat, das das skalierte Element darstellt, während der Animation von der Mitte entfernt (dargestellt durch ein blaues Quadrat).

Ursache des Problems

Das Problem entsteht, weil die Transformationseigenschaft der Animation die vorherige Übersetzungstransformation überschreibt. Dadurch wird die Übersetzung entfernt, die die Ausrichtung des Elements in der Mitte beibehält.

Lösung

Um dieses Problem zu lösen, müssen wir die Transformationen in derselben Transformationseigenschaft kombinieren und dabei sicherstellen, dass richtige Reihenfolge.

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

Erklärung

Kombination der Transformationen stellen sicher, dass die Übersetzung während der gesamten Animation beibehalten wird, während die Skalierungstransformation darüber angewendet wird. Dadurch kann das Element skaliert werden, ohne dass es aus der Mitte verschoben wird. Die transform-origin-Eigenschaft spielt in diesem Fall keine Rolle.

Aktualisiertes HTML:

<div>

Das obige ist der detaillierte Inhalt vonWarum verschiebt sich mein skaliertes Element während der Webanimation aus der Mitte und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!