如何从中心制作缩放动画

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作为默认状态。