按下回弹
按住触发按下后先缩再弹,用一个短促的动画强调点击已生效。
按住方块不放
这一条靠
: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);
}