从方形到圆形的css动画...就像浮动按钮动画一样

Question

我想要这样的过渡动画。编写该代码时，它会从顶部位置开始播放动画，然后从相反的一侧返回。

https://i.stack.imgur.com/eGcou.png

https://imgur.com/a/qRujsiZ

尝试了许多来自Internet的代码，但遗憾的是没有得到正确的解决方案。

     <div id="chartwrapper" class="card min-dumm">
         <div :style="{width:30+'px'}">
             <i class="fa fa-caret-right zigzag-enlarge-left" aria-hidden="true" @click="minimizeChart"></i>
          </div>
          <div class="card-body p-0 zigzag-card" :style="{width:chartwrapper-30+'px'}" :class="{reduce: chartminimizer}">
              <div class="chartbluebot chartzigzag pr-0 harddarkbg" :style="{width:chartwrapper-30+'px'}" style="height: 400px;background-color: #414c5d;">
            <div class="card mb-0 harddarkbg">
                  <IEcharts :option="candledata" :resizable="true" :style="{height: zigzagch_height+ 'px' }"></IEcharts>
             </div>
          </div>
    </div>

css

.zigzag-card{
    position:absolute;
    margin-left:30px;
    transform: scale(1);
    transform-origin: 50% 20%;
    transition: transform .2s, visibility 0s .2s;
  }
 .zigzag-card.reduce{
    transform: scale(0);
    transition: transform .2s, visibility 0s 0s, opacity .2s;
    width: 25px !important;
    right: 0;
    top: 50%;
    transform-origin: 50% 20%;
  }