CSS变换源问题

Question

我正在研究漂浮的幽灵 here .

我遇到的问题是transform-origin 属性。现在，阴影(底部的椭圆)似乎从左向右扩展，然后再次向该方向收缩。我想要的行为是让阴影从中间扩展和收缩 - 因此transform-origin: 50% 50%;。

这是相关代码，尽管查看 Codepen 会有所帮助:

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -64.5px;
  margin-top: -85.5px;
}

.shadow {
  margin-left: 22px;
  animation: shrink 3s ease-out infinite;
  transform-origin: center center;
  ellipse {
    transform-origin: center center;
  }
}

@keyframes shrink {
  0% {
    width: 20%;
  }
  50% {
    width: 27%;
  }
  100% {
    width: 20%;
  }
}

如果有人有任何想法，非常感谢!由于某种原因，真的很挣扎。

Answer 1

好的，我已经为你找到了解决方案。

我所做的是使用动画的边距和宽度来使其保持居中。我还为包含 svg 阴影的 p 标记指定了幻影的设定宽度，以保持阴影居中。

这是我编辑的CSS，

.shadowFrame {
 width: 130px;
}
.shadow {
  animation: shrink 3s ease-out infinite;
  transform-origin: center center;
  ellipse {
    transform-origin: center center;
  }
}

@keyframes shrink {
  0% {
    width: 90%;
    margin: 0 5%;
  }
  50% {
    width: 60%;
    margin: 0 20%;
  }
  100% {
    width: 90%;
    margin: 0 5%;
  }
}

这是live link .