如何从中心制作缩放动画？

Question

我有一个 css 缩放动画是这样的：

.DownloadButton:active {
  animation-duration: 0.15s;
  animation-name: clickButton;
  transform-origin: center;
}
@keyframes clickButton {
  from {
    width: 14%;
    font-size:14px;
  }
  50% {
    width: 13.5%;
    padding:0px 2px;
    font-size: 13.5px;
  }
  to {
    width: 14%;
    font-size:14px;
  }
}

这是我的 html:

        <a href="...">
            <div class="DownloadButton">
                <p>Click here to download.</p>
            </div>
        </a>

但它从左上角而不是中心开始缩放。我怎样才能改变这个？还有，如何在播放动画时保持页面高度一致？

Answer 1

在 css 规则中使用 transform-origin: center 作为默认状态。

如何从中心制作缩放动画？

How tdo i make a scaling animation from the center?

html

css

css-transitions

css-transforms