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

Wie behalte ich ein zentriertes Bild während der Animation bei?

In einer Situation wie der in der von Ihnen bereitgestellten Geige gezeigten, in der eine CSS3-Animation erstellt wurde Skaliert ein Element entsprechend der absoluten Position eines anderen Elements in der Mitte, kann es während der Animation zu einer Fehlausrichtung des Elements kommen. Insbesondere könnte es außermittig erscheinen, wie die roten Quadrate in der Geige zeigen.

Um dies zu beheben, können wir die Eigenschaft „transform-origin“ ändern. Das Problem entsteht, wenn die neue Transformation (innerhalb der Animation) die ursprüngliche überschreibt. In diesem Fall dient die ursprüngliche Transformation dazu, die zentrierte Ausrichtung des Elements beizubehalten.

Um dieses Problem zu umgehen, müssen wir die Transformationen innerhalb derselben Transformationseigenschaft kombinieren und so die richtige Reihenfolge sicherstellen. Der folgende Code veranschaulicht den korrigierten 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;
  }
}

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