Animazioni e trasformazioni CSS

Con i CSS sarà possibile trasformare ed animare gli elementi di una pagina web. Cosa succederà a JavaScript?

Qualche tempo fa la Apple ha presentato al CSS Working Group del W3C una proposta riguardante transizioni ed animazioni con i CSS.  Il tutto è stato preso in considerazione ed inserito nel documento che mostra i progressi del gruppo.

Ma di cosa stiamo parlando? Sono novità interessanti e prioritarie o l’introduzione di queste proposte potrebbe aumentare la confusione?

Le novità

Trasformazioni CSS

Pur non essendo incluse nell’ultima proposta, le trasformazioni CSS sono comunque correlate. La proprietà transform consente infatti di spostare, ruotare o ridimensionare un elemento della pagina.

Transizioni CSS

Questo modulo gestisce le transizioni tra pseudo-classi, come potrebbe essere il passaggio allo stato :hover di un link e viceversa. Per la transizione è possibile specificare un determinato periodo di tempo (transition-duration), il passaggio non sarà quindi istantaneo. Ad esempio un link potrebbe cambiare colore sfumando.

Animazioni CSS

Se già con il modulo dedicato alle transizioni è possibile associare ad un oggetto dei brevi movimenti, con questo modulo si possono raggiungere risultati ancora più complessi.

Definendo gli eventi associati ad una determinata animazione, è possibile infatti indicare quali siano le proprietà che cambiano, il loro valore, e per quanto tempo.

Esempi pratici

Mi rendo conto che con queste novità sia facile fare confusione. Per chiarirsi le idee basta avere installato Safari: il browser Apple infatti supporta queste funzioni con dei comandi proprietari (con il prefisso -webkit-).

Per trasformazioni e transizioni questo è uno dei migliori esempi disponibili. Se invece volete vedere un’animazione CSS, la trovate in questa pagina, ma vi servirà una delle ultime nightly build di Safari (anche Safari 4 beta).

Possibili problemi

Siamo sicuri che queste novità siano positive per gli sviluppatori? Fino ad ora la parte interattiva di una pagina era gestibile con JavaScript (lasciamo da parte Flash): introdurre dei nuovi meccanismi di controllo direttamente nei CSS potrebbe generare diversi problemi.

Compatibilità tra i browsers

Inutile dirlo, se già adesso ci sono problemi ad ottenere risultati equivalenti sui vari browser, occupandosi esclusivamente dell’aspetto visivo delle pagine, cosa succederà quando il discorso riguarderà anche l’interazione tra vari elementi? Queste proprietà saranno di fatto inutilizzabili, a meno che non si voglia ricorrere a JavaScript per ottenere risultati simili sui browser che non le supportano. Ma allora perchè non usare direttamente JavaScript?

Interazione con JavaScript

Separando l’aspetto dell’interazione tra CSS e Javascript, si presenta un altro problema: l’interazione tra i due mondi. Non è possibile (al momento) intercettare un oggetto quando è nel mezzo di un’animazione CSS, ma nemmeno sapere se una transizione sia già avvenuta.

Accessibilità

I problemi non mancano nemmeno per quanto riguarda l’accessibilità. Già adesso per uno screen reader non è facile sapere tutto ciò che succede in una pagina, soprattutto se certi script AJAX vengono realizzati senza seguire le specifiche. Introdurre altre complicazioni aumenterà inevitabilmente le difficoltà per alcune categorie di utenti.

Conclusioni

Le possibilità offerte da trasformazioni, transizioni e animazioni CSS potrebbero essere interessanti, ma sarà bene valutarne pro e contro quando sarà il momento di utilizzarle. Il fatto che esista una determinata tecnologia, non significa che debba essere per forza utilizzata.

La tentazione potrebbe essere forte, perchè con poche righe di CSS sarà possibile animare facilmente gli elementi della pagina, ma la cosa migliore sarà continuare a gestire le interazioni esclusivamente con JavaScript, così come HTML e CSS sono riservati rispettivamente a contenuto e presentazione.

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

8 commenti su “Animazioni e trasformazioni CSS”

  1. Credo che difficilmente sarà strappato lo scettro a Javascript.

    Anche se questo non ci salverà comunque da utilizzi alquanto discutibili di tutte le nuove possibilità offerte, sono curiosissimo di osservare le solite sperimentazioni che in casi come questo nascono come funghi :P

  2. Bah, ancora non si possono usare i CSS3, che già darebbe una bella mano agli sviluppatori, che senso ha una direzione già egregiamente coperta da js?

  3. Sicuramente affidando le animazioni al CSS anziché a javascript si potrà aggirare l’ostacolo che alcune persone si auto-infliggono a favore della “sicurezza”, cioè disabilitare attraverso il browser l’esecuzione di comandi JS.
    Come contro c’è l’obbligo di avere installato Webkit, di cui l’utente occasionale non avrà sicuramente mai sentito parlare…

  4. Sono daccordo su tutto però un dubbio mi viene…insomma Apple non è scema da andarsi a schiantare contro un muro come la lotta a Javascript…e quindi l’unica soluzione che mi viene in mente è sponsorizzare questa tecnologia con il fine di farla diventare la soluzione ideale per le animazioni dei siti realizzati per iPhone…non trovate?

    PS Tom, ti è arrivata l’intervista? :)

  5. @Stefano: il tuo sospetto è giustificato, è molto probabile che queste novità interessino alla Apple soprattutto per iPhone e iPod Touch (sì, la mail è arrivata ;) ).

  6. Quelle animazioni si vedono da dio anche con Google Chrome…
    ..non so come la pensiate voi, ma il webkit è potentissimo e non ho mai problemi di visualizzazione (l’unica cosa che FF rende meglio sono i bordi stondati), è davvero un peccato che per motivi di compatibilità non ci si possa sbizzarrire con chissà quale effettone.

  7. Siamo nel 2013, è passato un po’ di tempo, e ora possiamo dire qualcosa in più oltre alle previsioni… sicuramente sono un passo in avanti per quanto riguarda la velocità di scaricamento di una pagina web, ma il problema principale rimane: la compatibilità.

  8. “Non è possibile (al momento) intercettare un oggetto quando è nel mezzo di un’animazione CSS, ma nemmeno sapere se una transizione sia già avvenuta.” Ora questo è possibile, almeno con jQuery.