HTML5 - Transizioni

Le transizioni appartengono a una nuova serie di effetti che sono incorporati in HTML5 e che può essere regolato con CSS3In precedenza, questo tipo di effetti doveva essere eseguito da Javascript utilizzando una delle tante librerie e framework disponibili (Mootools, Jquery, ecc.), ma quando è stato introdotto il nuovo standard, tali effetti sono stati incorporati, come transizioni, animazioni, trasformazioni . .
Utilizzo delle transizioni
Prima di vedere come utilizzare una transizione, dobbiamo sapere di cosa si tratta. Sappiamo che quando applichiamo una modifica con la proprietà : hover quando si passa il mouse sull'elemento, prende immediatamente lo stile assegnato quando il mouse è sopra di esso, una transizione non è altro che il controllo su come verrà apportata quella modifica, ovvero la durata della modifica, la velocità a che si sta per realizzare, per ottenere un effetto di commistione tra il vecchio e il nuovo stato.
Possiamo riassumere quindi che la transizione è il passaggio da uno stato all'altro all'interno del documento HTML e tutte le proprietà con cui è possibile effettuare questa modifica, nell'immagine seguente vediamo uno stato iniziale e uno stato finale, la transizione è ciò che accade Tra entrambi.
INGRANDIRE
Proprietà di transizione
Vediamo le proprietà e gli attributi che possiamo usare per effettuare una transizione:

• ritardo di transizione: Specifica un ritardo nell'unità di tempo dopo il quale verrà avviata l'applicazione dell'effetto.
• durata della transizione: Specifica il tempo per il quale deve avvenire la transizione.
• proprietà di transizione: Specifica a quale proprietà deve essere applicata la transizione.
• funzione di temporizzazione della transizione: Specifica il modo in cui verranno trattati i valori intermedi durante l'esecuzione della transizione.
• transizione: È la scorciatoia con cui possiamo applicare tutte le proprietà della transizione in un'unica dichiarazione CSS. Può essere riassunta come segue: transizione:

Dobbiamo sottolineare che ritardo di transizione sì durata della transizione usa unità di tempo come valori, quindi deve essere specificato con S secondi o SM millisecondi.
Vediamo un esempio di come realizzare una transizione per un elemento in HTML5, vediamo il seguente codice:

 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.

Come possiamo vedere abbiamo implementato le diverse proprietà dell'elemento di transizione usando il prefisso -webkit, questo ci assicura che sarà soddisfatto per i browser Cromo sì Safari, per implementarli per Firefox sì musica lirica dobbiamo includere anche i prefissi -moz e -o.
Possiamo anche notare che impostiamo il ritardo in 100ms il che significa che avrà un piccolo ritardo prima di iniziare la transizione, quindi l'intera durata dell'effetto dovrebbe durare 500ms che è quanto stabilito in durata.
Vediamo un'immagine con tutte le fasi dell'effetto:
INGRANDIRE
Come possiamo vedere, la transizione fa sì che l'effetto si applichi gradualmente durante il tempo specificato.
Con questo finiamo il tutorial su come applicare l'effetto di transizione a un elemento in HTML5, dobbiamo continuare a esercitarci fino a quando non diventa naturale posizionare il codice richiesto in modo che i nostri documenti e le nostre pagine raggiungano un maggiore dinamismo.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo