跳到主要內容

按下抖動

按住觸發

按下時快速橫向晃動,用於「不允許」或校驗失敗的回饋。

按住方塊不放
這一條靠 :active 觸發。按住方塊不放,鬆開後重放。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 按下抖動 */
@keyframes pressShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px) rotate(-2deg); }
  45%      { transform: translateX(5px) rotate(2deg); }
  70%      { transform: translateX(-3px) rotate(-1deg); }
}
.anim-press-shake:active {
  animation: pressShake .45s ease-in-out;
}