{"id":122,"date":"2010-11-30T09:06:36","date_gmt":"2010-11-30T08:06:36","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/capire-le-css3-transitions\/"},"modified":"2010-11-30T09:06:36","modified_gmt":"2010-11-30T08:06:36","slug":"capire-le-css3-transitions","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/capire-le-css3-transitions\/","title":{"rendered":"Capire le CSS3 Transitions"},"content":{"rendered":"

E’ con grande piacere che presentiamo un estratto dal Capitolo 2 di CSS3 for Web Designers<\/a><\/cite> di Dan Cederholm (A Book Apart, 2010). \u2014Ed.<\/em><\/p>\n

Era il 1997 e sedevo nel mio appartamento fatiscente nella bellissima Allston nel Massachusetts: la tipica nottata a fissare del codice sorgente cercando di insegnare a me stesso l’HTML, al termine di una giornata passata ad impacchettare CD presso un’etichetta discografica locale per una paga misera (da qui l’appartamento fatiscente). Sono sicuro che potete identificarvi.<\/p>\n

Una nottata trionfale a dire il vero: alzai il pugno in segno di una dolce vittoria. Avevo appena creato del codice che faceva funzionare il mio primo effetto rollover di immagini in JavaScript. Ve li ricordate?<\/p>\n

Mi ricordo ancora lo stupore nel vedere un pulsante grafico creato da me in maniera approssimativa “scambiarsi” con un pulsante diverso quando ci si passava sopra con il mouse. All’epoca avevo a malapena un’idea riguardo a quello che stavo facendo, ma far s\u00ec che qualcosa effettivamente cambiasse sulla pagina in maniera dinamica… beh, era semplicemente magico!<\/p>\n

\u00c8 passata molta acqua sotto ai ponti negli ultimi dieci anni per quel che riguarda l’interazione e l’esperienza visuale sul web. Storicamente, tecnologie quali Flash e JavaScript hanno permesso di creare animazioni, movimenti ed effetti interattivi, ma recentemente, con i browser che hanno cominciato a supportare le transizioni e le trasformazioni di CSS, possiamo tranquillamente spostare alcune di quelle animazioni ed arricchimenti della experience nei nostri fogli di stile.<\/p>\n

Nel 1997 c’erano volute parecchie notti di grattacapi per il mio primo rollover in JavaScript, molte righe di codice che all’epoca mi sembravano come degli alieni e molte immagini. Oggi CSS3 rende possibili delle interazioni pi\u00f9 ricche e molto pi\u00f9 flessibili tramite semplici righe di codice che fortunatamente “degradano dolcemente” nei browser che non le supportano ancora.<\/p>\n

Possiamo iniziare ad usare le transizioni CSS3 gi\u00e0 adesso, a patto di prestare molta attenzione alla scelta delle situazioni nelle quali usarle. Sicuramente, non rimpiazzeranno tecnologie come Flash, JavaScript o SVG (specialmente senza un supporto pi\u00f9 vasto da parte dei browser), ma possono essere usate per spingere il livello della experience pi\u00f9 in alto. E, cosa ancora pi\u00f9 importante, sono relativamente semplici da implementare per i web designer che hanno gi\u00e0 una certa familiarit\u00e0 con i CSS: ci vogliono solo poche righe di codice.<\/p>\n

\n

Una cosa insignificante che condiziona le sorti di una cosa assai pi\u00f9 importante<\/h2>\n

Inizialmente sviluppate solo dal team di WebKit per Safari, le CSS Transitions sono ora una Working Draft del W3C. Costituiscono un buon esempio di un’innovazione portata avanti da un browser che pu\u00f2 diventare un potenziale standard. Dico potenziale perch\u00e9 ad oggi \u00e8 soltanto una bozza. Comunque, Opera ha recentemente aggiunto il supporto per le CSS Transitions nella versione 10.5 e Firefox ha promesso di supportarle nella versione 4.0. In altre parole, mentre rimangono una draft e continuano ad evolversi, sono abbastanza stabili perch\u00e9 Opera e Firefox le considerino seriamente e le supportino. Pertanto, le CSS transitions non sono pi\u00f9 esperimenti proprietari solo di Safari.<\/p>\n

Vediamo come funzionano le transizioni.<\/p>\n<\/div>\n

\n

Cosa sono le CSS Transitions?<\/h2>\n

Mi piace pensare alle CSS transitions come al burro<\/em>: rendono morbidi i cambiamenti di valore nei vostri fogli di stile quando vengono fatte scattare da interazioni come il passaggio del mouse sopra ad un elemento, i click e il focus. A differenza del vero burro, per\u00f2, le transizioni non fanno ingrassare: si tratta solo di poche semplici regole da aggiungere al vostro foglio di stile per arricchire alcuni eventi nel vostro design.<\/p>\n

Il W3C spiega le CSS transitions<\/a> in maniera piuttosto semplice:<\/p>\n

\n

Le CSS transitions fanno in modo che i cambiamenti di valore nel CSS risultino “morbidi” per la durata specificata. Questo ammorbidimento nel passaggio da un valore ad un altro crea un’animazione CSS quando viene attivato da un click del mouse, nel passaggio a uno stato focus o active o da un qualunque cambiamento dell’elemento (incluso un cambio nell’attributo classe dell’elemento).<\/p>\n<\/blockquote>\n<\/div>\n

\n

Un esempio semplice<\/h2>\n

Ecco un semplice esempio, nel quale aggiungo una transizione al colore di background di un link, che cambia quando vi si passa sopra con il mouse. Useremo una transition per rendere il cambiamento pi\u00f9 morbido, un effetto prima possibile solo con l’uso di Flash o JavaScript, ma ora attuabile con poche semplici righe di CSS.<\/p>\n

Il markup consiste in un semplice hyperlink, cos\u00ec:<\/p>\n

 \n<a href=\"#\" class=\"foo\">Transition me!<\/a>\n<\/code><\/pre>\n
Di seguito, aggiungiamo una dichiarazione per lo stato normale del link con un po’ di padding e un background color verde chiaro, seguito da un cambiamento di colore del background verso un verde pi\u00f9 scuro al passaggio sopra di esso:<\/p>\n
 \na.foo {\n  padding: 5px 10px;\n  background: #9c3;\n  }\na.foo:hover {\n  background: #690;\n  }\n<\/code><\/pre>\n
\"Esempio<\/p>\n
Fig. 1: Lo stato del link: normale e :hover<\/code><\/p>\n<\/div>\n
Ora, aggiungiamo una transizione al cambio di colore del background. Questo render\u00e0 pi\u00f9 lineare ed animata la differenza lungo un certo intervallo temporale.<\/p>\n
\n<\/object><\/p>\n
Fig. 2: Qui vediamo la transizione scorrevole del background dal verde chiaro al verde scuro.<\/p>\n<\/div>\n
Per il momento, useremo solo le propriet\u00e0 con i prefissi dei produttori che attualmente funzionano nei browser basati su WebKit (Safari e Chrome) cos\u00ec da rendere pi\u00f9 semplici le cose. Pi\u00f9 tardi aggiungeremo i prefissi dei produttori per Mozilla e Opera.<\/p>\n
 \na.foo {\n  padding: 5px 10px;\n  background: #9c3;\n  -webkit-transition-property: background;\n  -webkit-transition-duration: 0.3s;\n  -webkit-transition-timing-function: ease;\n  }\na.foo:hover {\n  background: #690;\n  }\n<\/code><\/pre>\n
Notate le tre parti di una transition nella dichiarazione:<\/p>\n