跳到主要内容

按下回弹

按住触发

按下后先缩再弹,用一个短促的动画强调点击已生效。

按住方块不放
这一条靠 :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);
}