Shake Animation on Invalid Inputs

Animazione di scuotimento di un campo di input quando il valore inserito non è quello previsto.

Il tutto utilizzando solo HTML e CSS, nessun codice JavaScript!

Qui il video in MENO DI 1 MINUTO! --> https://www.youtube.com/shorts/f62q_jq8deE

HTML:

<input
    type="text"
    pattern="[a-zA-Z ]*"
    placeholder="Inserisci il tuo nome"
    />

CSS:

input:invalid {
  animation: shake .3s
}

@keyframes shake {
  25% { transform: translateX(4px) }
  50% { transform: translateX(-4px) }
  75% { transform: translateX(4px) }
}

Iscriviti al mio canale YouTube!