按下抖動
按住觸發按下時快速橫向晃動,用於「不允許」或校驗失敗的回饋。
按住方塊不放
這一條靠
: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;
}