Press Shake
Press to triggerA quick horizontal shake on press — for disallowed or invalid actions.
Hold the box down
Triggered by
:active Hold the box down, release, and it replays.
Tune parameters
Interactive animations are driven by pointer state; duration and easing live on
transition / animation — change the numbers in the code below.
Full code
/* Press Shake */
@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;
}