按下回彈
按住觸發按下後先縮再彈,用一個短促的動畫強調點擊已生效。
按住方塊不放
這一條靠
: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);
}