How tdo i make a scaling animation from the center?

Question

I have a css scaling animation that's this:

.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;
  }
}

This is my html:

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

but it scales from the top left corner instead of the center. How can I change this? Also, how to I keep the height of the page consistent when the animation is played?

Answer 1

Use transform-origin: center in the css rule for the default state.