Realizzare semplici animazioni in CSS

Già in precedenza avevo dedicato una serie di post al CSS e al suo utilizzo, per curare la impaginazione e in generale la grafica di uno EPUB. Tornerò oggi nei paraggi, parlando di una delle principali novità introdotte col cosiddetto CSS3 (etichetta di comodo, sotto cui sono raccolte svariate cose), ossia le animazioni. Dubito che potranno essere di qualche utilità, per realizzare uno e-book (o almeno io lo spero, dato che un libro con immagini animate, che si spostano qui e là nella pagina, non è proprio di mio gusto), ma può comunque essere vantaggioso tenere in considerazione questa possibilità. Quando si pensa ad animazioni più o meno belle e sensate, in una pagina web, di solito il primo strumento a cui le si collega è il JavaScript. Niente di strano: dopotutto, il JavaScript è nato proprio per dare vita ai siti, che agli albori del web erano alquanto statici, e la manipolazione degli elementi di una pagina è tuttora uno dei suoi principali usi, almeno a livello di web design. La possibilità di creare e gestire animazioni utilizzando il CSS, però, ci offre in alcuni casi una valida alternativa, soprattutto in termini di consumo di risorse e di velocità: se tutto ciò che dobbiamo fare è muovere una immagine o modificarne la visibilità, il CSS è la soluzione migliore. Le animazioni, dunque. Ciò che ci è offerto da questa recente funzione del CSS è la possibilità di animare il passaggio da un insieme di proprietà a un altro, una sola volta o ripetutamente, usando animazioni lineari o con effetti particolari. Ad esempio, se fissiamo come punto di inizio un valore di opacity: 0 e come punto di arrivo un valore di opacity: 1, l'elemento a cui è assegnata questa animazione diventerà visibile a poco a poco, nel tempo di durata della animazione. Se fissiamo invece due diversi valori di color, uno come inizio e uno come fine, sarà il colore dell'elemento a cambiare a poco a poco. In breve, possiamo animare il passaggio da (più o meno) qualsiasi proprietà del CSS a qualunque altra proprietà, per gli elementi che scegliamo. I passaggi necessari per utilizzare una animazione sono due: creare l'animazione e assegnarla a uno o più elementi della pagina. La prima cosa da fare, dunque, è definire la regola nel nostro foglio di stile CSS; la regola per una animazione è leggermente diversa da una normale regola del CSS, ma non troppo. Questa è la struttura di base. @keyframes nome {
    from {
    }
    to {
    }
}
La parte più insolita è probabilmente costituita dallo @ iniziale, che contraddistingue questo e altri tipi di nuove regole, ma non è niente per cui perdere il sonno: possiamo considerare il blocco @keyframes come una formula, per introdurre la sequenza di operazioni che compongono la nostra animazione, e vivere serenamente. Ciò che ho indicato come "nome" può essere un nome qualunque, che caratterizzerà la nostra animazione: scegliete quello che preferite, purché ogni animazione abbia un nome diverso dalle altre. Il nome ci servirà più avanti, per assegnare questa animazione agli elementi che animeremo. All'interno della prima coppia di parentesi graffe dovremo elencare le varie tappe della nostra animazione; come è ovvio, le tappe dovranno essere almeno due, ossia un inizio e una fine. Dopo la parola from, elenchiamo le proprietà di partenza: il colore che un elemento possiede all'inizio della nostra animazione, oppure le sue dimensioni iniziali, o qualsiasi altra cosa cambierà nel corso del processo. Dopo la parola to, invece, elenchiamo le proprietà che l'elemento possiederà alla fine del processo. Una volta fissato inizio e fine, la transizione sarà gestita automaticamente dalla animazione. Se la nostra animazione non dovrà passare direttamente dallo stato iniziale a quello finale, ma vogliamo che attraversi particolari fasi intermedie, le possiamo specificare utilizzando un valore in percentuale. Ad esempio, from {
    color: red;
}
50% {
    color: white;
}
to {
    color: blue;
}
descrive una animazione che modifica il colore di un elemento: si parte dal rosso, si arriva al bianco a metà dell'animazione (ossia al 50%) e si conclude con un colore blu. Se vogliamo, poi, possiamo esprimere in percentuale anche from e to, invece di usare le parole: non farà alcuna differenza. Se ci piacciono particolarmente i numeri, dunque, potremo scrivere 0% al posto di from e 100% al posto di to, il che renderà forse più chiare le fasi intermedie della nostra animazione. Per ogni tappa, come è ovvio, possiamo inserire tutte le proprietà CSS che vogliamo, in base a ciò che è necessario per la nostra animazione: se vogliamo modificare contemporaneamente la posizione, il colore e la dimensione di un elemento, basterà elencare tutte le rispettive proprietà CSS dentro le varie tappe, una dopo l'altra. Ad esempio, from {
    width: 200px;
    background-color: red;
}
to {
    width: 400px;
    background-color: blue;
}
porterà il nostro elemento da una larghezza di 200 pixel a una larghezza di 400 pixel, modificando nel frattempo il suo colore di sfondo da rosso a blu. Una volta costruita la regola, dovremo assegnarla a un elemento. Operazione molto semplice: basta aggiungere alcune proprietà alla normale regola CSS, che abbiamo creato per quell'elemento. Le proprietà obbligatorie sono due: animation-name, che avrà come valore il nome della nostra animazione, e animation-duration, che avrà come valore la durata dell'animazione. Se ad esempio vogliamo applicare agli elementi di classe .invisibili una animazione di nome fantasma, che avrà una durata di 3 secondi, scriveremo .invisibili {
    animation-name: fantasma;
    animation-duration: 3s;
}
Questo è il minimo indispensabile. Ci sono poi altre proprietà, che ci permettono un maggiore controllo sulla nostra animazione, e che probabilmente vorremo usare, ma le uniche strettamente necessarie sono il nome e la durata. Vediamo rapidamente le altre proprietà. animation-timing-function ci permette di controllare il ritmo con cui la nostra animazione è eseguita. Se le assegniamo un valore linear, il ritmo sarà regolare dall'inizio alla fine; se assegniamo un valore ease, la nostra animazione partirà lentamente, si velocizzerà al centro e rallenterà verso la fine. Esistono diversi valori che possiamo assegnare ed è meglio testarli sul campo, per decidere il più adatto alle nostre esigenze. animation-delay ci permette di eseguire la nostra animazione con un certo ritardo, espresso in secondi: con un valore di 2s, ad esempio, l'animazione partirà dopo due secondi, invece di partire subito. animation-iteration-count ci permette di stabilire quante volte dovrà essere ripetuta la nostra animazione (se la vogliamo ripetere): basta assegnare come valore il numero di ripetizioni da eseguire, oppure la parola infinite, se vogliamo eseguirla ininterrottamente, per tutto il tempo in cui la pagina è aperta (attenzione: può diventare molto fastidioso per i visitatori). animation-direction può essere usata per modificare la direzione in cui sarà eseguita la nostra animazione: assegnandole il valore alternate, l'animazione sarà eseguita alternatamente da from a to e da to a from, se abbiamo scelto di ripetere la nostra animazione. animation-fill-mode, infine, ci permette di controllare l'aspetto finale del nostro elemento: se le assegniamo il valore forward, l'elemento manterrà l'aspetto che possiede alla fine della nostra animazione; in caso contrario, a fine animazione tornerà al suo aspetto iniziale. Se non abbiamo voglia di scrivere una sfilza di proprietà extra, possiamo usare la formula abbreviata, proprio come accade per le proprietà font, margin, padding e altre. In questo caso, useremo la proprietà animation, seguita dalla lista di tutti i valori. Ad esempio, animation: prova 3s linear 4 alternate 2s forward; è una comoda abbreviazione per questa sfilza di proprietà: animation-name: prova;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 4;
animation-direction: alternate;
animation-delay: 2s;
animation-fill-mode: forward;

Ovviamente non è necessario utilizzare tutte le proprietà, nella forma abbreviate, ma è utile rispettare questo ordine: nome, durata, timing, numero di ripetizioni, direzione, ritardo, fill mode. Siccome poi questa funzione CSS non è ancora standardizzata su tutti i browser, è molto probabile che vi ritroverete costretti a utilizzare i vari prefissi, per alcuni o per tutti i browser: sperimentate prima le animazioni nella forma senza prefissi, come abbiamo visto sopra e poi, se necessario, aggiungete via via le alternative ci prefissi: -webkit- per Chrome e Safari, -moz- per Firefox, -o- per Opera. Con Internet Explorer, le animazioni funzionano soltanto dalla versione 10 in poi, ma almeno non richiedono prefissi. Lo so, è un lavoraccio, ma per adesso è necessario.