跳到主要內容

按下回彈

按住觸發

按下後先縮再彈,用一個短促的動畫強調點擊已生效。

按住方塊不放
這一條靠 :active 觸發。按住方塊不放,鬆開後重放。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 按下回彈 */
@keyframes pressBounce {
  0%   { transform: scale(.9); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.anim-press-bounce:active {
  animation: pressBounce .4s cubic-bezier(.34,1.56,.64,1);
}