Animazioni CSS con MooTools

Dopo i diversi articoli che abbiamo dedicato alle evoluzioni CSS offerte dai browser di nuova generazione come i gradienti e le maschere di WebKit, sappiamo come con poche righe di semplice codice CSS si possano creare animazioni molto interessanti.

Unire la creazione di animazioni tramite righe di un foglio di stile e gli effetti Fx del framework MooTools è stata l’idea di Chris Schneider. In questa demo sono presenti diversi esempi con cui è possibile visualizzare il tutto in azione.

In parole semplici, vengono utilizzate le pseudo-classi per settare istanze Fx riguardanti determinati elementi presi in considerazione con i normali selettori CSS, in combinazione con proprietà  e stili personalizzati come -moofx: long width !important; o -moofx-transition: linear;. In questo articolo, l’autore ci spiega come utilizzare gli stili custom e ci fornisce il link allo script che fa un uso massiccio di Regular Expressions.

La compatibiltà  è estesa a tutte le ultime versioni stabili dei maggiori framework, come Firefox 2, Safari 3 e Internet Explorer 7. Ovvviamente IE6 è escluso dalla lista dato che non supporta le pseudo-classi dinamiche.