Una delle tante novità di Firefox 3.7 (oltre all’attesissimo supporto per WebGL) saranno le CSS3 Transitions.

C’è da dire che questa volta Gecko è indietro rispetto agli altri engine poiché sia Webkit (e le sue più famose implementazioni, Chrome e Safari) e Presto (o Tardi, l’engine di Opera) hanno già implementato le CSS3 Transitions come da Working Draft del W3C. Come al solito IE/Triton non fa testo, neanche nell’ultima versione, la 9 - Microsoft Wake UP!!

Vediamo la sintassi originale del W3C.

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Questa sintassi si traduce nei vari browser con i prefissi tipici delle working draft che caratterizzano alcune delle specifiche css3.

-moz-transition:
-webkit-transition:
-o-transition:

Vediamo un esempio:

<style type="text/css">
div#animate1 {
 border: 1px solid black;
 -webkit-transition: border .5s ease;
 -moz-transition: border .5s ease;
 -o-transition: border .5s ease;
}
div#animate1:hover {
 border: 10px solid green;
}
</style>
Il bordo di questo testo cambierà durante l'hover

Cos’ho fatto in questo esempio? Ho segnalato l’animazione del border, con la funzione ease (ottenuta tramite una curva di bezier e nello specifico la cubic-bezier(0.25, 0.1, 0.25, 1.0)), per una durata di mezzo secondo.

More Info: http://webkit.org/blog/138/css-animation/ https://developer.mozilla.org/en/CSS/-moz-transition

Alla prossima puntata con una demo probabilmente più interessante.