相关疑难解决方法(0)

我有一个类似于这个小提琴的情况,我有一个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; …