Css moves from small to large regions!

css

.animatezoomLayout {
    -webkit-animation: animatezoomLayout 0.6s;
    animation: animatezoomLayout 0.6s
}

@keyframes animatezoomLayout {
  from {
    transform: scale(0);
    width: 100px;
    height: 100px;
  }
  to {
    transform: scale(1);
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
  }
}

.searchBarLayout{
  position: fixed;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1588);
  top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
  z-index: 100;
  width: 450px;
  display: none;
  background-color: rgba(255, 255, 255, 1);
  padding: 30px;
  border-radius: 30px;
}

Major

<div class="searchBarLayout animatezoomLayout">
 500px 500px 
</div>

the above is the
I wrote according to the Great God"s solution, but the effect is still not as good as I wanted.
I want to change the outside div from a small area to a large area
like: https://kit.snapchat.com/port.

after aging, his outer frame will be enlarged and changed directly according to its extension, from color to white