css 從小區塊動畫至大區塊！

Question

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;

}

主要

<div class="searchBarLayout animatezoomLayout">

內容至少 500px 寬，500px 高

</div>

以上是我根據大神解釋另外寫的

但效果仍不像我要的那樣

我想使外面的 div 能從原本小的區塊，變成大的區塊

如同 ： https://kit.snapchat.com/port...

點擊後，他的外框會根據按鈕衍伸，直接放大且變顏色，從藍色到白色