Dai vita alle tue pagine web con le animazioni e le transizioni CSS

I design dei siti Web sono in continua evoluzione. Dal design reattivo, alla bella tipografia, agli schemi di codifica dei colori perfetti, alle illustrazioni, i creatori di siti Web escogitano nuove idee e design ogni giorno.

Gli utenti al giorno d'oggi hanno grandi aspettative sulle interfacce utente a causa di contenuti di così alta qualità disponibili su Internet. Con l'evoluzione delle interfacce del sito Web, lo è anche la tecnologia alla base. Un componente importante responsabile del miglioramento dell'interfaccia del sito Web è CSS .

I fogli di stile CSS o Cascading hanno il compito di rendere i siti molto interattivi definendone lo stile, il layout, i design. L'ultimo standard per CSS, ovvero CSS3, ha introdotto il concetto di animazioni e trasformazioni che migliorano l'esperienza dell'utente aggiungendo ulteriore profondità all'interfaccia utente. Con le animazioni e le transizioni CSS, puoi raccontare storie, creare effetti sontuosi e rendere l'interazione dell'utente con il tuo sito Web molto efficace e significativa.

Un'animazione è solo una simulazione di movimento che viene creata visualizzando una serie di oggetti come immagini uno dopo l'altro. La transizione, d'altra parte, è fondamentalmente un processo in cui un oggetto cambia da uno stato all'altro. Ma quando si parla di animazioni web, ce ne sono fondamentalmente di tre tipi: animazioni CSS o animazioni di fotogrammi chiave, transizioni CSS e animazioni JavaScript .

Animazioni CSS

Per creare animazioni in CSS è necessario modificare le proprietà CSS di un elemento come un'immagine o un testo, per un certo periodo di tempo. Possiamo cambiare le proprietà degli elementi tutte le volte che vogliamo e possiamo anche impostare la durata dell'animazione.

Specificare @fotogrammi chiave

Le animazioni CSS sono definite bit con fotogrammi chiave. Questi fotogrammi chiave sono i punti intermedi dell'animazione. Tutte le animazioni CSS sono specificate nella regola @keyframes. Questi fotogrammi chiave specificano cosa succede all'elemento in un momento particolare, ovvero

• quali proprietà stanno cambiando
• quando l'elemento si anima
• come si anima l'elemento

Puoi definire il tuo fotogramma chiave come:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Qui "a" e "da" specificano l'inizio e la fine dell'animazione. Possiamo anche specificare le animazioni per i momenti intermedi tra l'inizio e la fine in questo modo:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Qui 0% rappresenta l'inizio dell'animazione, 100% rappresenta la fine dell'animazione e 50% indica il cambiamento tra l'inizio e la fine. Ma come diciamo al browser per quanto tempo dovrebbe aver luogo l'animazione? Lo facciamo con l'aiuto di alcune proprietà di animazione . Queste proprietà di animazione sono associate all'elemento da animare. Per esempio:

element_name
{
animation_property: value;
style_property: value;
}

Qui l'elemento potrebbe essere qualsiasi tag HTML come div, span, img, p ecc. e style_property è qualsiasi proprietà di stile CSS come background_color, width, height ecc. Vediamo ora in dettaglio alcune proprietà di animazione.

1. @keyframes : i fotogrammi chiave vengono utilizzati per specificare il codice di animazione come discusso sopra.
2. animation-name : il nome specificato con @keyframes è il nome dell'animazione. Questo nome viene utilizzato per fare riferimento ai fotogrammi chiave con l'elemento da animare.
3. animation-duration : viene utilizzato per specificare la durata dell'animazione in secondi o millisecondi. Ad esempio, se lo impostiamo su 5 secondi, l'animazione verrà eseguita solo per 5 secondi. Se non impostiamo questa proprietà, l'animazione non verrà eseguita poiché il suo valore predefinito è 0.
4. animation-delay : Possiamo ritardare l'inizio dell'animazione specificando il tempo di ritardo dell'animazione. Ad esempio, se desideri avviare l'animazione 5 secondi dopo il caricamento della pagina nel browser, imposta il ritardo dell'animazione su 5 secondi.
5. direzione-animazione : Possiamo dire al browser se un'animazione si muove nella direzione inversa o alterna cicli con questa proprietà. Ad esempio, se si desidera che l'animazione venga eseguita dall'inizio alla fine, impostare il valore della durata dell'animazione su "normale". Se vuoi che venga eseguito dall'inizio alla fine, imposta il valore su "reverse".
6. animation-fill-mode : Possiamo specificare lo stile dell'elemento quando l'animazione non viene riprodotta con questa modalità, ad esempio quando l'animazione è ritardata o terminata, quale dovrebbe essere lo stile dell'elemento.
7. animation-iteration-count : il numero di volte in cui un'animazione può essere riprodotta è rappresentato da questa proprietà. Ad esempio, se vuoi riprodurre l'animazione una volta, impostala su 1, o se vuoi che l'animazione venga riprodotta per sempre, impostala su "infinito".
8. animation-timing-function : questa proprietà viene utilizzata per specificare la curva di velocità dell'animazione come lineare, accelerazione o deaccelerazione.
9. Animazione : è la proprietà abbreviata per impostare tutte le proprietà dell'animazione.

Ad esempio, puoi animare un oggetto che rimbalza con il seguente frammento di codice. Nota come la notazione abbreviata per l'animazione è stata utilizzata qui.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Transizioni

Le transizioni CSS vengono applicate alle proprietà degli elementi per una certa durata di tempo in base a determinate funzioni di temporizzazione, note anche come funzioni di andamento. Per funzione di temporizzazione, intendiamo una funzione che cambierà le proprietà degli elementi da uno stato all'altro come la progressione lineare, l'accelerazione o la deaccelerazione. Potresti aver notato che un'immagine scorre o si trasforma in un'altra immagine al passaggio del mouse o che viene riprodotto un suono al clic del mouse. Questi sono tutti effetti di transizione che possono rendere interattivo un sito web.

Le funzioni di andamento sono importanti per creare transizioni. Specificano come cambieranno le proprietà. Possono anche modificare la velocità con cui il valore delle proprietà cambia dal punto iniziale al punto finale di una transizione. Puoi applicare le transizioni nel modo seguente:

element 
{
style_property: value;
transition_property: value;
}

Qui element specifica l'elemento HTML che vuoi trasformare come div, H1, img ecc. style_property è lo stile CSS applicato a quell'elemento. Vediamo ora alcune proprietà di transizione :

• proprietà di transizione: l'effetto di transizione sarà sempre applicato alla proprietà CSS di un elemento come la sua larghezza, altezza, colore o forma. Il valore di questo attributo specifica quella proprietà CSS dell'elemento. L'effetto di transizione inizierà ogni volta che questa proprietà cambia, ad esempio al passaggio del mouse o al clic.
• transition-timing-function : questa è la funzione di facilità da applicare all'elemento. Questa proprietà viene utilizzata per specificare la curva di velocità di transizione come andamento in entrata, in uscita, lineare, ecc.
• transition-duration : è proprio come la proprietà di animation-duration. Viene utilizzato per specificare la durata dell'effetto di transizione in secondi o millisecondi. Ad esempio, se lo impostiamo su 5 secondi, la transizione avrà effetto si completerà in 5 secondi. Se non impostiamo questa proprietà, non ci sarà alcuna transizione poiché il suo valore predefinito è 0.
• transition-delay : Con questa proprietà, possiamo specificare la durata del tempo per ritardare l'effetto di transizione. Ad esempio, se desideri avviare l'effetto 5 secondi dopo il passaggio del mouse, imposta il ritardo di transizione su 5 secondi.
• transizione : è la proprietà abbreviata per impostare insieme tutte le proprietà di transizione sopra.

Ad esempio, il codice seguente cambierà la larghezza dell'elemento div al passaggio del mouse. Vedere la proprietà della scorciatoia di transizione applicata qui.

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animazioni vs. Transizioni

Somiglianze tra animazioni e transizioni

• Sia la transizione che l'animazione vengono utilizzate per visualizzare i cambiamenti nelle proprietà di un elemento.
• Possiamo specificare la durata per quanto tempo devono aver luogo la transizione e l'animazione.
• Abbiamo alcune funzioni di temporizzazione per alterare la velocità di passaggio da un valore all'altro per le transizioni e le animazioni.

Differenze tra animazioni e transizioni

• Le transizioni CSS sono reattive . Devono essere attivati ​​dagli utenti. Le animazioni, invece, vengono eseguite ogni volta che la pagina viene caricata sul browser. Non è necessario che siano attivati.
• Le transizioni vengono eseguite una volta e poi si interrompono. Quindi, dobbiamo attivarli ancora e ancora mentre le animazioni possono essere ripetute . Possono iniziare da soli fermarsi e poi ricominciare.
• Il browser si occupa delle transizioni stesso. Dobbiamo solo specificare l'inizio e la fine della transizione. Possiamo impostare l'effetto di transizione ma non possiamo alterare la velocità di cambiamento di una transizione nel mezzo. Ad esempio, se un'immagine scorre al passaggio del mouse, la vedremo semplicemente sfumare in entrata o in uscita mentre ci passiamo sopra.
• Le animazioni, d'altra parte, offrono la flessibilità di modificare le proprietà tra l'inizio e la fine. Questo accade con l'aiuto dei fotogrammi chiave. Ad esempio, possiamo impostare il colore di un'immagine su rosso per i primi 5 secondi, poi su blu per i successivi 5 secondi, poi su verde per i successivi 5 secondi e giallo per gli ultimi 5 secondi dell'animazione. Quindi, abbiamo il controllo sulle animazioni.

Prefissi del fornitore

Tutte le funzionalità CSS3 non sono supportate da tutti i browser. Pertanto, utilizziamo i prefissi lungo quelle proprietà CSS per browser specifici come -webkit- (Safari), -moz- (Firefox) o -o- (Opera). Ciò consente ai marcatori del browser di aggiungere un supporto per quella funzione CSS3. Questi prefissi sono noti come prefissi del fornitore o prefissi del browser CSS . Quindi, dobbiamo inserire anche i prefissi del fornitore insieme alle proprietà di animazione e transizione. Ad esempio, considera il codice seguente e osserva come sono stati utilizzati i prefissi del fornitore per Safari:

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Mancia! Puoi evitare questo trambusto usando librerie come -prefix-free . È una libreria JavaScript che aggiungerà il prefisso del browser corrente a qualsiasi codice CSS. Dai un'occhiata a molte di queste librerie disponibili sul web.

Conclusione

Gli sviluppatori di siti Web possono applicare animazioni e trasformazioni per attirare utenti sui tuoi siti Web. Puoi usarli per migliorare moduli, notifiche, grafica di sfondo, immagini, grafici, doodle, pulsanti di invito all'azione e quant'altro. Usa la tua immaginazione e puoi trovare un modo per stupire i tuoi utenti. Ricorda che anche un piccolo cambiamento nel tuo sito web può farlo sembrare molto migliore e aumentarne il valore. Quindi, hai già utilizzato le animazioni sul tuo sito web? Condividi i tuoi pensieri sull'utilizzo di animazioni e transizioni.