¿Cómo mantener el origen en el centro de la imagen en la animación a escala?

Tengo una situación similar a esta violín , donde tengo una animación CSS3 que escala un elemento en posición absoluta en el centro de otro elemento. Sin embargo, cuando se produce la animación, está descentrada, como se ve en los cuadrados rojos en relación con el azul en el ejemplo. ¿Cómo lo centro? Probé un par de configuraciones en la transform-originpropiedad, pero no produjo los resultados correctos.

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

Expandir fragmento

Dec 15 '17 02:12 annikam

El problema es que estás anulando la translatetransformación.

Cuando especificas una nueva transformación (la que está dentro de la animación), anula la primera. En su caso, está eliminando la traducción que está arreglando la alineación central .

Debe agregarlos a la misma transformpropiedad y prestar atención al orden porque es importante (¿ Por qué importa el orden de las transformaciones? rotar/escalar no da el mismo resultado que escalar/rotar )

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

Expandir fragmento

ACTUALIZAR

Como se comentó, es mejor centrar su elemento usando otro método que no sea la traducción para evitar cambiar la animación, ya que se puede usar con otros elementos.

Ejemplo:

Mostrar fragmento de código

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

Expandir fragmento

Dec 14 '2017 19:12 Temani Afif

Al utilizar una propiedad de transformacióntransform: scale(1); ya definida, perderá (anulará) la traducción solo con escala .transform: translate(-50%, -50%);

Cualquiera

repetir el me gusta deseado transform: translate(-50%, -50%) scale(1);o mejor dicho:
use CSS3 scale:y translate:propiedades por su cuenta:

@keyframes ripple_large {
  0% {
    scale: 1;  /* CHANGED THIS */
  }
  75% {
    scale: 3;  /* CHANGED THIS */
    opacity: 0.4;
  }
  100% {
    scale: 4;  /* CHANGED THIS */
    opacity: 0;
  }
}

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

.cat {
  height: 20vmax;
}

.center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%; /* CHANGED THIS */
  height: 10px;
  width: 10px;
  background: blue;
}

.to-animate {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%; /* CHANGED THIS */
  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="https://i.stack.imgur.com/LBCIk.jpg" class="cat">
  <div class="center-point">
  </div>
  <div class="to-animate one"></div>
  <div class="to-animate two"></div>
</div>

Expandir fragmento

Aug 22 '2023 14:08 Roko C. Buljan