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

The issue is that you are overriding the translate transformation.

When you specify a new transformation (the one inside the animation) it override the first one. In your case you are removing the translation that is fixing the center alignment.

You need to add them to the same transform property and pay attention to the order because it’s important (Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate)

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

Example:

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

More Related Contents:

Leave a Comment Cancel reply