如何在比例动画中保持原点在图像中心？

Question

我遇到的情况与此小提琴类似，在这里我有一个CSS3动画，该动画可缩放绝对位于另一个元素中心的元素。但是，发生动画时，动画会偏离中心，如示例中红色正方形相对于蓝色正方形所示。如何居中？我已经尝试过围绕该transform-origin属性进行一些配置，但这无法产生正确的结果。

代码如下：

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

我认为总的来说更好，因为我们可以考虑例如使用一些外部库在转换时添加动画的情况，在这种情况下我们不能更改动画，最好更改元素的CSS。