Corsi on-line

Animations.css: decine di animazioni CSS3 pronte da utilizzare

CSS3 Animation Cheat Sheet è un interessante progetto concepito per mettere a disposizione degli sviluppatori una raccolta completa di animazioni basate su CSS3 pronte da integrare in qualsiasi progetto per la realizzazione, o il perfezionamento, di siti Internet e applicazioni Web. Si tratta di una risorsa caratterizzata da un’estrema facilità d’uso, tutto quello che si dovrà fare per adottarla si riassume nella semplice inclusione di un foglio di stile e nella chiamata ad una classe preconfezionata.

Cattura

Sostanzialmente il CSS3 Animation Cheat Sheet sfrutta la regola @keyframes di CSS, quest’ultima prevede che un’animazione venga creata attraverso il passaggio (transizione) graduale da un set di CSS ad un altro; nel corso dell’animazione lo sviluppatore potrà cambiare più volte gli stili CSS utilizzati, inoltre, si potrà specificare quando un cambiamento dovrà avvenire tramite un valore percentuale o le parole chiave from e to analoghe a 0% e 100%.

Per aggiungere un’animazione in una pagina sarà necessario includere il fogli di stile animations.css tra i tag head, ricordandosi di modificare il nome della cartella nel caso in cui sia diversa dalla directory css indicata in esempio:

<link rel="stylesheet" href="css/animations.css">

Una volta fatto questo, per animare un elemento della pagina bisognerà richiamare la classe corrispondente all’animazione che si vuole applicare, come nell’esempio successivo:

<div id="object" class="slideUp">

Per nascondere l’elemento coinvolto prima che l’animazione venga attivata sarà possibile sfruttare la proprietà CSS visibility: hidden; da associare all’identificatore dell’elemento stesso:

#object{
	background-color: #ccc;
	visibility: hidden;
}

Per quanto riguarda le questioni inerenti la compatibilità, il CSS3 Animation Cheat Sheet è supportato da tutti i browser più diffusi nelle loro versioni aggiornate; relativamente ad Internet Explorer è consigliabile come minimo la release 10 per ottenere un rendering ottimale.

Via CSS3 Animation Cheat Sheet

Post correlati
I più letti del mese
Tematiche