Questo articolo illustra il processo di aggiunta di animazioni e transizioni in più fasi.
Come utilizzare animazioni e transizioni in più fasi?
Per creare un'animazione in più fasi, viene generata una serie di fotogrammi chiave. Specifica la serie di modifiche da applicare all'elemento HTML selezionato. Ogni fotogramma chiave rappresenta uno stato diverso dell'animazione e il browser passa agevolmente l'elemento tra questi stati. Durante le transizioni, specifica la modifica graduale delle proprietà CSS per una durata specificata dalle interazioni dell'utente o dai cambiamenti di stato.
Facciamo un esempio pratico per capire meglio:
Esempio 1: applicazione dell'animazione in più passaggi
In questo esempio, un'animazione multistep verrà applicata all'elemento HTML selezionato. Visita la dimostrazione qui sotto:
< stile >
.animationEsempio {
larghezza: 130px;
altezza: 130px;
colore di sfondo: verde bosco;
posizione: relativa;
animazione: moveAnimate 4s easy-in-out infinito;
}
< / stile >
< corpo >
< div classe = 'animationEsempio' >< / div >
< / corpo >
Nello snippet di codice sopra:
- Innanzitutto, la classe denominata ' animation Esempio ” è selezionato all'interno del “
etichetta '. - Successivamente, i valori di ' 130 pixel ” sono assegnati al “ altezza ' E ' larghezza ' proprietà.
- Inoltre impostare “ verde foresta ' E ' parente ” come valore per “ colore di sfondo ' E ' posizione ” proprietà per migliorare la visualizzazione.
- Successivamente, usa il ' animazione ” e impostalo uguale a “ moveAnimate 4s easy-in-out all'infinito ” per applicare le animazioni.
- Il valore è composto da quattro parti, la prima è l'animazione del nome personalizzato, la seconda è la durata del tempo da completare, la terza è il tipo di animazione e la quarta è il limite per quante volte questa animazione verrà applicata.
- Alla fine, crea un elemento HTML e assegna il ' animation Esempio classe ad esso.
Ora usa il ' fotogrammi chiave ” regola per definire la consuetudine “ moveAnimate ” animazione:
@ moveAnimate i fotogrammi chiave {0 % {
Sinistra: 0 ;
colore di sfondo: blu;
}
cinquanta % {
sinistra: 200px;
colore di sfondo: verde bosco;
trasformare: ruotare ( 180 gradi ) ;
}
100 % {
Sinistra: 0 ;
colore di sfondo: blu;
}
}
Nel blocco di codice sopra:
- Prima il ' @keyframe ” viene creato insieme al nome dell'animazione personalizzata che verrà definita.
- Successivamente, crea un blocco denominato ' 0% ” che applica gli stili CSS all'inizio dell'animazione. E utilizzare il ' colore di sfondo ' E ' Sinistra ” Proprietà CSS.
- Ora, crea un blocco chiamato e ' cinquanta% ” per modellare in mezzo all'animazione. Fornisce i valori di ' 200 pixel ”, “ verde foresta ' E ' ruotare (180 gradi) ” alle proprietà “left”, “background-color” e “transform”. Ciò consente all'elemento selezionato di ruotare di 200 px a sinistra.
Dopo la compilazione del blocco di codice di cui sopra:
L'output mostra che l'animazione in più passaggi è stata applicata all'elemento HTML selezionato.
Esempio 2: applicazione della transizione in più fasi
Per applicare la transizione multistep, i selettori CSS possono essere utilizzati insieme al ' transizione ' proprietà. Visita il codice seguente:
.dissolvenza {
opacità: 1;
transizione: opacità 1s;
}
.fade:hover {
opacità: 0;
}
<
/ stile>
<
corpo>
< P classe = 'dissolvenza' > Passa sopra di me per vedere la transizione. < / P >
< / corpo >
La spiegazione del codice sopra:
- Innanzitutto, la consuetudine “ dissolvenza ” viene selezionata la classe e viene fornito il valore 1 al “ opacità ' proprietà. Inoltre, imposta il valore di ' opacità 1s ' al ' transizione Proprietà CSS. Questo imposta o rimuove l'opacità in una durata di tempo di ' 1s ”.
- Successivamente, il “ : al passaggio del mouse ” selettore è assegnato al “ dissolvenza ' classe. In esso, il valore di ' 0 ” è impostato sulla proprietà opacità.
- Alla fine, l'elemento HTML viene creato all'interno del '
” tag e la classe di “ dissolvenza ” è collegato ad esso.
Terminata la fase di compilazione, la pagina web si presenta così:
La GIF mostra che la transizione di dissolvenza personalizzata è stata applicata all'elemento HTML selezionato.
Conclusione
Le animazioni e le transizioni in più passaggi danno vita alle pagine Web HTML aggiungendo movimento ed effetti visivi. Per l'animazione, il ' fotogrammi chiave ' vengono utilizzati insieme alla percentuale di durata come ' 0% ” è l'inizio, “ cinquanta% ” è la metà, e “ 100% ” è la fine della durata dell'animazione. Per la transizione, il selettore CSS può essere utilizzato insieme al ' transizione ' classe. Questo articolo ha dimostrato il processo di utilizzo di animazioni e transizioni in più passaggi.