Invalid Input Shake Animation
Simple shake animation when invalid input, very helpful for form validation
Created by / Amat Qoimam
HTML
<input type="text" placeholder="Enter username" pattern="[a-z]*" />
CSS
@keyframes shake {
25% {
transform: translateX(0.5rem);
}
50% {
transform: translateX(-0.5rem);
}
75% {
transform: translateX(0.5rem);
}
}
input:invalid {
animation: shake 0.3s;
/* other style */
}