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

【问题标题】：How tdo i make a scaling animation from the center?如何从中心制作缩放动画？
【发布时间】：2021-09-14 19:22:23
【问题描述】：

我有一个 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>

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

【问题讨论】：

在working demonstration 的问题中包含相关的 HTML 和 CSS 可能会有所帮助。
会使用 transform: scale(calc(13.5 / 14)) 代替动画字体大小 - 因为转换不会改变其他东西。

标签： html css css-transitions css-transforms

【解决方案1】：

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

【讨论】：