MICHELEPISANI.IT
 

Con solo HTML e CSS!

Shake Animation on Invalid Inputs

October 23
07:082022

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!

Tags

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Il Canale YouTube in ITALIANO

1 VIDEO GRATIS ogni 2 settimane! ISCRIVITI!

Entra a far parte della community su Facebook

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao Anna Rita, diciamo che... esisteva. Ho mantenuto il prodotto gratuitamente fintanto che ho …

sassacy

Questo articolo è molto interessante e utile ((((jajatemple@null.net))). Quando sei innamorato e …

christina

Ho ripristinato il mio matrimonio in crisi dopo il mio incontro in sole 48 ore con il sacerdote …

Michele Pisani

Ciao Vincenzo, per i vari video l'obiettivo è soffermarsi sul video e ricopiarli in modo da …