Questo articolo mostra una dimostrazione pratica per riprodurre/aggiungere più animazioni CSS contemporaneamente.
Come riprodurre più animazioni CSS contemporaneamente?
Applicando più animazioni CSS contemporaneamente, gli sviluppatori possono facilmente creare interfacce più accattivanti. Per riprodurre molte animazioni CSS contemporaneamente, assegna a ciascuna un nome univoco e applica quei nomi agli stessi componenti o a componenti separati nella pagina.
Segui la procedura seguente per riprodurre/aggiungere più di un'animazione contemporaneamente.
Passaggio 1: creazione della struttura
Innanzitutto, crea un elemento HTML in cui le animazioni vengono applicate nei passaggi successivi. Ad esempio, l'immagine verrà inserita:
< div classe = 'span' >
< imm src = 'libro.jpg' altezza = '100px' larghezza = '100px' classe = 'animare' >
< / div >
Nello snippet di codice sopra:
- Innanzitutto, il percorso dell'immagine è impostato su ' src 'attributo.
- Successivamente, il valore di ' 100 pixel ” viene fornito alle proprietà CSS “width” e “height”.
- Inoltre, imposta il valore di ' animare ' al ' classe 'attributo.
Passaggio 2: impostazione delle animazioni
IL ' fotogrammi chiave ” vengono utilizzati per creare animazioni personalizzate in base alle esigenze della pagina web. Ad esempio, vengono create due animazioni nel seguente frammento di codice:
I fotogrammi chiave @-webkit ruotano {100 % {
trasformare: ruotare ( 180 gradi ) ;
}
}
@-webkit-scala dei fotogrammi chiave {
100 % {
trasformare: scaleX ( 1 ) scala Y ( 1 ) ;
}
}
Nello snippet di codice sopra:
- Prima il ' @-webkit-fotogrammi chiave 'meccanismo utilizzato per impostare' rotazione ' E ' ruotare ” animazioni denominate.
- Successivamente, utilizza il ' trasformare ” proprietà che ha un valore del “ ruotare() ' nel ' rotazione ” corpo di animazione. Questa funzione ruota l'elemento di un angolo di ' 180 gradi ”.
- Successivamente, imposta l'animazione che cresce o estende l'elemento originale di un fattore di ' 1 ” in entrambi i “ X ' E ' E ” asse nel “ scala ” corpo di animazione.
Passaggio 3: applicazione dell'animazione agli elementi HTML
All'interno della porzione CSS, seleziona la classe ' animare ” che è assegnato al “
posizione: assoluta;
Sinistra: 60 %;
larghezza : 110 pixel;
altezza : 110 pixel;
margine: -40px 0 0 -40px;
-webkit-animation: scala 3s infinita lineare;
-webkit-animation: spin 2s infinito lineare;
}
Descrizione delle proprietà utilizzate nel blocco di codice precedente:
- Innanzitutto, imposta il valore di ' assoluto ” al CSS “ posizione ' proprietà. Allinea il “ imm ” elemento secondo l'animazione.
- Quindi, fornire i valori di ' 60% ”, “ 110 pixel ' E ' 110 pixel ” al CSS “ Sinistra ”, “ larghezza ' E ' altezza ' proprietà. Queste proprietà vengono utilizzate per impostare la posizione e la dimensione di un elemento.
- Successivamente, imposta il valore di ' scala 3s infinita lineare ' al ' -webkit-animazione Proprietà CSS.
- E il ' 3s ” è la durata di quell'animazione, il “ infinito ' è la durata dell'animazione e ' lineare ” è la direzione dell'animazione.
- Alla fine, fornire i valori di ' spin 2s infinito lineare ” al CSS “ -webkit-animazione ' proprietà. Questa proprietà aggiunge la seconda animazione denominata ' rotazione ' sul ' imm elemento '.
Dopo la compilazione del blocco di codice sopra, l'animazione si presenta così:
La gif sopra illustra che solo ' rotazione ” l'animazione viene riprodotta sull'elemento mirato.
Passaggio 4: riproduzione di più animazioni su elementi HTML
Come nel passaggio precedente, all'elemento è stata applicata solo un'animazione. Questo perché più valori sono stati assegnati allo stesso ' -webkit-animazione ' proprietà.
Per risolvere questo problema, avvolgere l'elemento di destinazione con un altro elemento HTML. Come il ' div ” è già utilizzato come wrapper nel primo passaggio, seleziona il suo “ span ” e aggiorna il codice come:
.animare {posizione: assoluta;
Sinistra: 60 %;
larghezza : 110 pixel;
altezza : 110px;
margine: -40px 0 0 -40px;
-webkit-animation: scala 3s infinita lineare;
}
. span {
posizione: relativa;
in alto: 160px;
-webkit-animation: spin 2s infinito lineare;
}
Nel codice sopra:
- In un primo momento il “ animare ” la classe rimane la stessa e da essa viene rimossa solo la seconda animazione che viene inserita nella “ span ' classe.
- Successivamente, imposta la posizione utilizzando il pulsante ' posizione ' E ' superiore ' proprietà.
Dopo l'esecuzione dello snippet di codice sopra, la pagina web ora appare così:
L'output mostra che entrambe le animazioni sono state applicate contemporaneamente all'elemento HTML selezionato.
Conclusione
Per applicare più proprietà CSS, avvolgi l'elemento con elementi HTML e applica loro le animazioni in modo che ogni elemento HTML contenga una singola animazione. Poiché la proprietà figlio eredita l'animazione applicata all'elemento HTML padre, vengono applicate più animazioni senza causare errori o ambiguità per il compilatore. Questa è la procedura per riprodurre/aggiungere più di un'animazione CSS contemporaneamente.