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

css css3

Question

Tengo una situación similar a este fiddle , donde tengo una animación CSS3 que escala un elemento en posición absoluta en el centro de otro elemento. Sin embargo, cuando la animación tiene lugar, está descentrada, como se ve por los cuadrados rojos en relación con el azul en el ejemplo. ¿Cómo lo centro? He intentado un par de configuraciones en torno a la propiedad de transform-origin , pero esto no produce los resultados correctos.

Código a continuación:

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

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

Answer 1

El problema es que está borrando la transformación de translate .

Cuando especifica una nueva transformación (la que está dentro de la animación), anula la primera, por lo que debe agregarlas en la misma propiedad de transform . En su caso, está eliminando la traducción que está arreglando la alineación central :

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

ACTUALIZAR

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