Home-theater-designers
I CSS offrono agli sviluppatori la possibilità di dare vita alle proprie pagine Web utilizzando l'animazione dei fotogrammi chiave.
L'animazione CSS si ottiene alterando lo stato iniziale di un elemento HTML attraverso le sue varie proprietà. Alcune proprietà CSS generali che possono essere animate includono:
come rimuovere google drive da windows 10
- Larghezza
- Altezza
- Posizione
- Colore
- Opacità
Queste proprietà CSS generali vengono manipolate da elementi CSS specifici per creare il risultato desiderato. Se ti sei mai imbattuto in un elemento animato su una pagina web, è probabile che l'elemento sia stato animato utilizzando l'animazione dei fotogrammi chiave.
Che cos'è un elemento di fotogrammi chiave?
Il elemento fotogrammi chiave può essere utilizzato su uno o più elementi HTML a cui ha accesso. Identifica un punto specifico nello stato di un elemento e detta l'aspetto che questo elemento deve avere in questo momento.
Potrebbe sembrare molto da digerire, ma in realtà è abbastanza semplice. Il elemento fotogrammi chiave ha una struttura piuttosto semplice che può essere facilmente compresa e adattata per adattarsi a qualsiasi esigenza di animazione.
Esempio di struttura dei fotogrammi chiave
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}Supponiamo che tu voglia animare un pulsante rettangolare verde trasformandolo in un pulsante rotondo blu.
Entro i parametri del a partire dal sezione sopra dovrai posizionare tutto lo stile necessario affinché l'elemento assomigli a un pulsante rettangolare verde, quindi nel a sezione, inserirai tutti i requisiti di stile per trasformare questo pulsante in un pulsante rotondo blu.
Se stai pensando, non sembra molto simile all'animazione. Bene, questo perché un componente chiave di questo intero processo deve ancora essere introdotto --- questo componente è la proprietà di animazione.
La proprietà dell'animazione
Il proprietà di animazione ha un insieme di diverse sottoproprietà; questi sono usati in combinazione con la struttura dei fotogrammi chiave sopra per animare l'elemento HTML desiderato.
Tuttavia, è necessario conoscere solo cinque di queste sottoproprietà e i valori ad esse associati per ottenere l'animazione nei tuoi progetti. Queste proprietà sono note come:
- Nome dell'animazione
- Durata dell'animazione
- Funzione di temporizzazione dell'animazione
- Ritardo animazione
- Conteggio-iterazione-animazione
Utilizzo dell'animazione su una pagina Web
Utilizzando lo scenario sopra, l'obiettivo è creare un pulsante animato.
Esempio di animazione del pulsante
Animation
/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}
Click!
La sezione di animazione del codice sopra contiene le cinque proprietà secondarie menzionate in precedenza. Ogni proprietà ha una funzione molto distinta e insieme lavorano per animare qualsiasi elemento HTML a cui sono destinate.
Correlati: Come scegliere come target parte di una pagina Web utilizzando i selettori CSS
La proprietà del nome dell'animazione
Questa proprietà è la proprietà più importante nell'elenco. Senza il proprietà del nome dell'animazione , non avresti identificatori da incollare su elemento fotogrammi chiave , rendendo inutile tutto il codice all'interno dei suoi parametri.
Se hai dimenticato di includere una o due delle altre sottoproprietà, potresti comunque avere un'animazione abbastanza decente. Tuttavia, se hai dimenticato il proprietà del nome dell'animazione non avresti alcuna animazione.
La proprietà della durata dell'animazione
Questa proprietà viene utilizzata per definire la quantità di tempo che un elemento animato dovrebbe impiegare durante la transizione da uno stato al successivo.
Nell'esempio sopra, il proprietà della durata dell'animazione è impostato su 5 secondi (5s), quindi il pulsante rettangolare verde avrà un totale di 5 secondi prima che diventi completamente un pulsante rotondo blu.
La proprietà Ritardo animazione
Questa proprietà è importante per una ragione; il caricamento completo di alcune pagine Web potrebbe richiedere alcuni secondi (a causa di diversi fattori). Così il proprietà di ritardo dell'animazione impedisce l'avvio immediato dell'animazione nel caso in cui la pagina Web impieghi un po' di tempo per caricarsi.
Nell'esempio sopra, il proprietà di ritardo dell'animazione è impostato su 4s, il che significa che l'animazione non inizierà fino a 4 secondi dopo che la pagina web è stata visitata (dando alla pagina web abbastanza tempo per caricarsi prima dell'inizio dell'animazione).
La proprietà del conteggio delle iterazioni dell'animazione
Questa proprietà indica quante volte l'elemento animato deve passare da uno stato al successivo. Il proprietà del conteggio delle iterazioni dell'animazione assume valori che sono parole e numeri. Il valore numerico può essere qualsiasi cosa da 1 in su, mentre il valore della parola è solitamente infinito .
Nell'esempio sopra, il valore del conteggio delle iterazioni dell'animazione è impostato per infinito , il che significa che finché la pagina web è attiva, la proprietà del pulsante si animerà da uno stato all'altro, continuamente.
La proprietà della funzione di temporizzazione dell'animazione
Questa proprietà determina il movimento dell'elemento animato durante la transizione da uno stato al successivo. Il proprietà della funzione di temporizzazione dell'animazione viene solitamente assegnato uno dei tre valori di andamento.
- Facilità d'uso
- Facilità
- Facilità di entrata
Il valore di facilità di uscita è usato sopra; questo fa passare lentamente l'animazione da uno stato all'altro. Se l'obiettivo è creare una transizione lenta quando il pulsante si sta trasformando da un rettangolo verde a un cerchio blu, dovresti usare il valore di facilità d'uso . Se volessi solo la transizione lenta nella direzione opposta, useresti il valore di sollievo .
Ridurre il nostro codice
Nella maggior parte dei casi, ridurre la durata di un programma è visto come un approccio pratico. Ciò è dovuto principalmente al fatto che un minor numero di righe di codice riduce la probabilità che gli errori passino inosservati nei programmi.
Il codice sopra può essere ridotto di quattro righe. Ciò può essere ottenuto semplicemente utilizzando la proprietà di animazione senza identificare in modo esplicito ciascuna delle sue proprietà secondarie.
Ridurre il codice per l'esempio di animazione del pulsante
Animation
/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}