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...點擊後，他的外框會根據按鈕衍伸，直接放大且變顏色，從藍色到白色