Wie behalte ich den Ursprung in der Bildmitte in der Maßstabsanimation?

Question 1

Ich habe eine ähnliche Situation wie diese Geige, wo ich eine CSS3-Animation habe, die ein Element skaliert, das absolut in der Mitte eines anderen Elements positioniert ist. Wenn die Animation jedoch stattfindet, ist sie außermittig, wie in dem Beispiel durch die roten Quadrate relativ zu Blau zu sehen ist. Wie zentriere ich es? Ich habe ein paar Konfigurationen in der Umgebung ausprobiert transform-origin -Eigenschaft, aber dies führt nicht zu den richtigen Ergebnissen.

@keyframes ripple_large {
	0% {transform:scale(1); }
	75% {transform:scale(3); opacity:0.4;}
	100% {transform:scale(4); opacity:0;}
}

.container {
  position: relative;
	display: inline-block;
  margin: 10vmax;
}

.cat {
  height: 20vmax;
}

.center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10px;
  width: 10px;
  background: blue;
}

.to-animate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  height: 5vmax;
  width: 5vmax;
  transform-origin:center;
}

.one {
		animation: ripple_large 2s linear 0s infinite;
}

.two {
		animation: ripple_large 2s linear 1s infinite;
}

<div class="container">
  <img src="http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg" class="cat">
  <div class="center-point">
  </div>
  <div class="to-animate one"></div>
  <div class="to-animate two"></div>
</div>

Question 2

Das Problem ist, dass Sie die überschreiben translate Transformation.

Wenn Sie eine neue Transformation (die in der Animation) angeben, wird sie überschreiben der erste. In deinem Fall du entfernen die Übersetzung das fixiert die Center Ausrichtung.

Sie müssen sie dem gleichen hinzufügen transform Eigenschaft und achten Sie auf die Reihenfolge, weil es wichtig ist (Warum ist die Reihenfolge der Transformationen wichtig? Drehen/Skalieren ergibt nicht das gleiche Ergebnis wie Skalieren/Drehen)

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

.container {
  position: relative;
  display: inline-block;
  margin: 10vmax;
}

.cat {
  height: 20vmax;
}

.center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10px;
  width: 10px;
  background: blue;
  transform-origin: center;
}

.to-animate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
  height: 5vmax;
  width: 5vmax;
}

.one {
  -webkit-animation: ripple_large 2s linear 0s infinite;
  animation: ripple_large 2s linear 0s infinite;
}

.two {
  -webkit-animation: ripple_large 2s linear 1s infinite;
  animation: ripple_large 2s linear 1s infinite;
}

<div class="container">
  <img src="http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg" class="cat">
  <div class="center-point">
  </div>
  <div class="to-animate one"></div>
  <div class="to-animate two"></div>
</div>

AKTUALISIEREN

Wie kommentiert, ist es besser, Ihr Element mit einer anderen Methode als der Übersetzung zu zentrieren, um eine Änderung der Animation zu vermeiden, da dies mit anderen Elementen verwendet werden kann.

Beispiel:

@keyframes ripple_large {
  0% {
    transform: scale(1) ;
  }
  75% {
    transform:scale(3) ;
    opacity: 0.4;
  }
  100% {
    transform: scale(4) ;
    opacity: 0;
  }
}

.container {
  position: relative;
  display: inline-block;
  margin: 10vmax;
}

.cat {
  height: 20vmax;
}

.center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10px;
  width: 10px;
  background: blue;
  transform-origin:center;
}

.to-animate {
  position: absolute;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  margin:auto;
  border: 1px solid red;
  height: 5vmax;
  width: 5vmax;
}

.one {
  animation: ripple_large 2s linear 0s infinite;
}

.two {
  animation: ripple_large 2s linear 1s infinite;
}

<div class="container">
  <img src="http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg" class="cat">
  <div class="center-point">
  </div>
  <div class="to-animate one"></div>
  <div class="to-animate two"></div>
</div>