跳到主要內容

擠壓回彈

先橫向壓扁再回彈到正常,適合按鈕回饋。

效果預覽
參數調節
完整代碼
/* 擠壓回彈 */
@keyframes squeeze {
  0%   { transform: scale(1, 1); }
    40%  { transform: scale(1.18, .82); }
    70%  { transform: scale(.94, 1.06); }
    100% { transform: scale(1, 1); }
}

.squeeze { animation: squeeze .5s ease-out both; }