How to keep origin in center of image in scale animation?

Question

I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results.

Code below:

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

The issue is that you are erasing the translate transformation.

When you specify a new transformation (the one inside the animation) it override the first one, so you need to add them in the same transform property. In your case you are removing the translation that is fixing the center alignment :

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

UPDATE

As commented, it's better to center your element using another method than translation to avoid changing the animation since this can be used with other elements.