跳到主要内容

按下抖动

按住触发

按下时快速横向晃动,用于「不允许」或校验失败的反馈。

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