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

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

Answer 1

https://codepen.io/caocong/pe...
直接从snapchat copy了相关的css 然后精简了一下就是这样的效果