Dai vita alle tue pagine Web con animazioni e 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 ogni giorno nuove idee e design.

Gli utenti al giorno d’oggi hanno grandi aspettative sulle interfacce utente a causa di tali contenuti di alta qualità disponibili su Internet. Man mano che le interfacce dei siti web si evolvono, lo è anche la tecnologia che le sta dietro. Uno dei principali componenti responsabili del miglioramento dell’interfaccia del sito Web è il CSS.

I CSS o Cascading Style Sheets sono responsabili di rendere i siti molto interattivi definendone lo stile, il layout e il 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 del 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 parliamo di animazioni web ci sono fondamentalmente tre tipi: animazioni CSS o animazioni di fotogrammi chiave, transizioni CSS e animazioni JavaScript.

Animazioni CSS

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

Specificando @keyframes

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

• 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 ‘from’ specificano l’inizio e la fine dell’animazione. Possiamo anche specificare animazioni per momenti intermedi di tempo 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 deve svolgersi l’animazione? Lo facciamo con l’aiuto di alcune proprietà dell’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. ed style_propertyè qualsiasi proprietà di stile CSS come background_color, width, height ecc. Osserviamo ora alcune proprietà dell’animazione in dettaglio.

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 a 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 animation-delay su 5s.
5. animation-direction: Possiamo dire al browser se un’animazione si muove nella direzione opposta o si alternano cicli con questa proprietà. Ad esempio, se desideri che l’animazione venga eseguita dall’inizio alla fine, imposta il valore di animation-duration su ‘normal’. Se vuoi che venga eseguito dall’inizio alla fine, imposta semplicemente 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 desideri che l’animazione venga riprodotta per sempre, impostala semplicemente su "infinito".
8. animation-timing-function: Questa proprietà è usata per specificare la curva di velocità dell’animazione come lineare, accelerazione o de-accelerazione.
9. Animazione: è la proprietà abbreviata per l’impostazione di tutte le proprietà dell’animazione.

Ad esempio, puoi animare un oggetto che rimbalza con il seguente frammento di codice. Si noti come qui sia stata utilizzata la notazione abbreviata per l’animazione.

@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 de-accelerazione. Potresti aver notato che un’immagine scorre o si trasforma in un’altra immagine al passaggio del mouse o un suono viene riprodotto al clic del mouse. Questi sono tutti effetti di transizione che possono rendere interattivo un sito web.

Le funzioni di interpolazione sono importanti per creare transizioni. Specificano come cambieranno le proprietà. Possono anche alterare 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 :

• transition-property: 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 la 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 facilitazione da applicare all’elemento. Questa proprietà viene utilizzata per specificare la curva di velocità della transizione come l’andamento in entrata, in uscita, lineare ecc.
• transition-duration: è proprio come la proprietà animation-duration. Viene utilizzato per specificare la durata temporale dell’effetto di transizione in secondi o millisecondi. Ad esempio, se lo impostiamo su 5 secondi, la transizione 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 di cui sopra.

Ad esempio, il codice seguente cambierà la larghezza dell’elemento div al passaggio del mouse. Vedi la proprietà abbreviata 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 contro 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 avvenire la transizione e l’animazione.
• Abbiamo alcune funzioni di temporizzazione per alterare la velocità di passaggio da un valore all’altro per transizioni e animazioni.

Differenze tra animazioni e transizioni

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

Prefissi del venditore

Tutte le funzionalità CSS3 non sono supportate da tutti i browser. Quindi, utilizziamo prefissi insieme a 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 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 gli utenti sui tuoi siti Web. Puoi usarli per migliorare moduli, notifiche, grafica di sfondo, immagini, grafici, scarabocchi, pulsanti di invito all’azione e altro. Basta usare la tua immaginazione e puoi trovare un modo per stupire i tuoi utenti. Ricorda che anche un piccolo cambiamento nel tuo sito web può migliorarne l’aspetto e aumentarne il valore. Quindi, hai già utilizzato le animazioni sul tuo sito web? Condividi le tue opinioni sull’utilizzo di animazioni e transizioni.