css 從小區(qū)塊動畫至大區(qū)塊！

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">
內(nèi)容至少 500px 寬，500px 高
</div>

以上是我根據(jù)大神解釋另外寫的
但效果仍不像我要的那樣
我想使外面的 div 能從原本小的區(qū)塊，變成大的區(qū)塊
如同 ： https://kit.snapchat.com/port...

點(diǎn)擊後，他的外框會根據(jù)按鈕衍伸，直接放大且變顏色，從藍(lán)色到白色