HTML5 - Animazioni

Le animazioni sono effetti come le transizioni ma migliorate nella loro funzionalità, nel senso che c'è un controllo superiore su ciò che può essere fatto, grazie alla disponibilità di più opzioni per apportare modifiche da uno stile all'altro.
Proprietà di animazione
Come avevamo detto in precedenza, le animazioni sono transizioni migliorate a causa del numero di opzioni e proprietà che ci consentono di avere un maggiore controllo su di esse, esamineremo ciascuna di esse:

• animazione-ritardo: Applicare un tempo specifico per poter avviare l'animazione una volta attivata.
• direzione dell'animazione: Specifica se l'animazione deve essere riprodotta all'indietro o in cicli alternati.
• animazione-durata: Indica l'intervallo di tempo in cui deve essere riprodotta l'animazione.
• conteggio-iterazione-animazione: Indica il numero di volte in cui l'animazione deve essere ripetuta e può anche inserire il valore infinito per infinite ripetizioni dello stesso.
• nome-animazione: Specifica il nome dell'animazione.
• animazione-play-state: Consente di mettere in pausa l'animazione e di continuare la riproduzione.
• animazione-timing-funzione: Specificare come devono essere trattati i valori intermedi nell'animazione
• animazione: È la scorciatoia con cui possiamo incorporare tutte le proprietà dell'animazione in un'unica dichiarazione CSS e ha la seguente struttura:

animazione:
Ora che conosciamo le proprietà disponibili, vediamo un codice di esempio per analizzarlo:

 Esempio
Ci sono molti tipi diversi di frutta - ci sono oltre 500 varietà di banane da sole. Quando aggiungiamo gli innumerevoli tipi di mele, arance e altri frutti ben noti, ci troviamo di fronte a migliaia di scelte.

In questo esempio vediamo che al momento di fare : hover sull'elemento avremo un ritardo di 100ms quindi l'animazione avrà 500ms da eseguire e verrà ripetuta un numero infinito di volte.
Quindi vediamo che con il nome che abbiamo dato all'applicazione useremo la proprietà @fotogrammi chiave che è dove ti diremo quali elementi verranno animati.
Vediamo come dovrebbe apparire nel nostro browser:

INGRANDIRE

Come vediamo c'è un cambiamento nello sfondo dell'elemento quindi il colore della lettera e la dimensione del carattere, alla fine dell'animazione torna allo stato iniziale e tutto questo processo viene ripetuto di nuovo, questo gli conferisce un movimento che non esiste con l'uso delle transizioni.
Con questo dimostriamo anche l'importanza del nome dell'animazione poiché funziona come identificatore per poterlo assegnare a @fotogrammi chiave.
Con questo finiamo il tutorial e con questo siamo già in grado di eseguire animazioni di base, al fine di fornire più movimento ai nostri documenti HTML.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo