Head Shake
Quick small left-right head shake — a 'wrong' feedback cue.
Preview
Tune parameters
Full code
/* Head Shake */
@keyframes headShake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-8px) rotate(-3deg); }
30% { transform: translateX(7px) rotate(3deg); }
45% { transform: translateX(-6px) rotate(-2deg); }
60% { transform: translateX(5px) rotate(2deg); }
80% { transform: translateX(-2px) rotate(-1deg); }
}
.head-shake { animation: headShake .7s ease-in-out both; }