Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation
Webdesign

Lo stato della animazioni CSS

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Il CSS è maturato in molti modi negli anni, non da meno per quel che riguarda le animazioni CSS. Ogni giorno che passa sempre più sviluppatori stanno creando interfacce piene di vita. In questo articolo vedremo lo stato delle animazioni CSS, come sono cresciute, cosa sono capaci oggi e includeremo alcune risorse e strumenti disponibili. Diamoci una mossa!

Crescita

L'uso delle animazioni sul web sta aumentando, in gran parte grazie all'aggiunta di transition e @keyframes al CSS. C'era una volta un tempo quando le animazioni e il CSS non si conoscevano, ma non è quello che accade oggi. Articoli, tutorial, corsi premium e anche linee guida sul motion sono più accessibili adesso che in passato. Combinare @keyframes con la proprietà animation, in aggiunta a transition ha finalmente dato agli sviluppatori la possibilità di creare movimento correttamente e dare alle interfacce una personalità e vita una volta inconcepibili.

Part of Googles Material Motion Guidelines
Dalle linee guida di Google sul Material Motion

Non c'è mai stato un momento più eccitante per le animazioni e il design interattivo di CSS di adesso!

Proprietà Animation e Keyframes

L'implementazione attuale della proprietà animation permette agli sviluppatori di controllare la durata, il tempo, il ritardo, la ripetizione del conteggio, il modo di riempimento e lo stato di riproduzione. La porzione dei tempi permette anche una funzione steps(). Questa funzione speciale dei tempi divide un'animazione o una transizione in segmenti (come una pellicola), invece di una transizione continua da uno stato all'altro. Keyframes permette agli sviluppatori di dichiarare le posizioni usando from, to e persino le percentuali per animare la proprietà dei valori dichiarati.

Proprietà Transition

Poi c'è la gloriosa proprietà transition; una proprietà appena tanto sofisticata quanto animation e una che ci permette di controllare la velocità dell'animazione quando si cambiano le proprietà. Il processo di transizione tra due stati è chiamato in genere una transizione implicita; un termine che descrive gli stati in mezzo agli stati iniziali e finali, definiti implicitamente dal browser. Le transizioni attualmente permettono di personalizzare la proprietà, il tempo, la durata e il ritardo.

Il video introduttivo qui sotto è preso da Operativi con le transizioni CSS di Craig Campbell.

Cosa manca?

L'animazione CSS potrebbe essere potente come arriva, ma ancora manca un aspetto particolare che gli animatori desiderano di più, il contro della linea temporale. Ciò che intendo sono le sequenze che possono essere influenzate e manipolate basate sui tempi.

La sintassi qui sopra non esiste, ma crea un'immagine più dettagliata di ciò che bramano gli esperti di animazioni sul web.  GreenSock per esempio, è molto conosciuto per questo tipo di sequenze, ma sfortunatamente succede solo in JavaScript. Non sarebbe grandioso averlo anche in CSS? Penso di si.

Il video sopra preso dalla Piattaforma di animazione GreenSock: primi passi di Craig Campbell.

C'è certamente l'abilità di controllare gli eventi animation e transition tramite l'uso di JavaScript per un ulteriore controllo granulare di una sequenza. Con JavaScript, gli sviluppatori possono individuare l'inizio di ogni nuova iterazione dell'animazione, quando si verifica un animazione, quando l'animazione finisce e lo stesso vale per gli eventi di transizione.

Ispezione e strumenti del browser

Questi sono tempi abbastanza emozionanti per gli strumenti di sviluppo del browser al fine di controllare e regolare le animazioni CSS. La maggior parte dei browser (Firefox, Chrome) permettono l'ispezione delle animazioni CSS per quanto riguarda Safari e Edge. Da quello che mi è stato detto da una fonte che lavora per Microsoft, l'ispezione delle animazioni è qualcosa che il team di Microsoft vuole realmente fare. Speriamo che sia lo stesso per Safari.


Per quanto riguarda i browser che supportano l'ispezione dell'animazione abbiamo le seguenti abilità...

  • L'ispezione della linea temporale che può essere pulita.
  • Mostrare le animazioni applicate agli pseudo-elementi ::before e ::after.
  • Aggiustare la proprietà keyframes e valorizzarla al volo.
  • Resoconto dei nomi di keyframes.
  • Esposizione delle proprietà animate.
  • Semplificazione degli editor dei picker e delle curve di bézier. 
  • Codifica dei colori per conoscere se l'evento è una transizione, un fotogramma chiave o un'animazione web.
  • Controllare e cambiare la velocità del playback.

Mentre gli sviluppatori hanno ancora un po' da scegliere in base della lista sopra, chiedono ancora più strumenti per le animazioni per quanto riguarda l'interazione dell'utente. Questo potrebbe anche essere conosciuto come interpolazione della proprietà, l'intersezione di un valore intermedio in una serie calcolandola da valori conosciuti circostanti; proprio come quando cambiate un nuovo valore con le transizioni. Queste animazioni dinamiche/reattive possono iniziare in ogni momento e hanno durata variabile basata sull'interazione dell'utente. Qualcosa ancora una volta su cui non si può fare il debug o ispezionare da nessuno strumento per sviluppatori in dotazione al browser al momento.

Il futuro

Il futuro sembra luminoso per le animazioni CSS, anche se tutte le specifiche collegate tendono a muoversi lentamente. Il modulo CSS motion-path, contain, will-change e la media query prefers-reduced-motion (non ancora uno standard e solo per WebKit) sono attualmente funzionalità imminenti per gli animatori di CSS.

I tracciati di movimento CSS

I tracciati di movimento consentono agli sviluppatori di animare qualsiasi oggetto grafico lungo un percorso specificato dall'autore. È possibile definire un percorso in modo molto simile come definito da SVG 1.1.

Il motion-path definisce un percorso che un elemento seguirà o su cui si muoverà. La nostra proprietà motion-offset è la posizione dell'elemento da qualche parte sul percorso. La proprietà motion-rotation è la direzione che l'elemento “affronta” come si muove lungo il percorso.

Date un'occhiata a queste raccolte di dimostrazioni su CodePen di Dan Wilson che fornisce esempi concreti che mostrano le capacità di motion-path.

Will Change

La proprietà will-change fornisce un modo agli autori di suggerire ai browser il tipo di cambiamenti che si aspettano su un elemento. Ciò lascia impostare al browser le ottimizzazioni appropriate in anticipo prima che l'elemento sia davvero cambiato.

Questo tipo di ottimizzazione può migliorare il tempo di caricamento percepito e il layout di una pagina completando il dispendioso lavoro in anticipo prima che siano davvero necessari. Detto ciò, si suggerisce che gli sviluppatori non applichino will-change a troppi elementi poiché potrebbe consumare risorse e causare a una pagina di rallentare.

Prefers Reduced Motion

Questa aggiunta non-spec per WebKit consente di creare stili che evitino grandi aree di movimento per gli utenti che specificano una preferenza per il movimento ridotto nelle Preferenze di sistema.

Questa è più di una situazione di accessibilità rispetto alla creazione di movimento effettivo. Una cosa interessante da considerare però e una a cui dare un'occhiata a vostro piacimento.

Contain

Questo modulo CSS indica che la sottostruttura dell'elemento è indipendente dal resto della pagina, consentendo in tal modo le ottimizzazioni importanti degli user agent quando utilizzati correttamente. Quello più interessante per gli animatori CSS è il valore di paint che può essere passato.

Se l'elemento contenitore è fuori dallo schermo o oscurato, il browser può saltare direttamente dal colorare il suo contenuto poiché gli è garantito di essere fuori dallo schermo o oscurato. In definitiva questo garantisce valore attraverso una pipeline di rendering più veloce durante una colorazione iniziale. Attualmente ancora si tratta di una bozza di lavoro presso il W3C.

Risorse

Ci sono un sacco di modi per tenere il passo con le animazioni CSS. Di seguito ci sono alcuni strumenti e risorse tra cui le specifiche tecniche da leggere a vostro piacimento. Se siete a conoscenza di altri impressionanti e utili risorse fatecelo sapere nei commenti e le aggiungeremo alla lista. Felice animazione!

Specifiche del W3C

Apprendimento

Strumenti

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.