Css3 transizioni e animazioni

css3
Tempo stimato di lettura: 1 minuto, 45 secondi
Pubblicato il 18 aprile 2012

Oggi parleremo di due nuove funzioni introdotte con la specifica css3: le transizioni e le animazioni. Entrambe le proprietà sono ancora allo stato di working draft, ma mentre la prima è totalmente supportata dai browser sul mercato (internet explorer la implementerà nella versione 10), la seconda ha solo un supporto parziale (Firefox, Webkit, IE9+).

Queste nuove proprietà consentono finalmente di ottenere effetti grafici che prima era possibile ottenere solo attraverso javascript o qualche libreria come jQuery.

Le transizioni CSS3

Le prime che approfondiremo sono le transizioni, che permettono di effettuare la transizione dello sfondo di un menu o di un testo in modo graduale tra due colori scelti.
Ora spiegheremo i vari parametri:

  • transition-property attraverso il quale si decide a quale proprietà applicare la transizione
  • transition-duration che ne decide la durata
  • transition-timing con cui si sceglie la modalità di transizione a scelta tra quelle predefinite :” ease, linear, ease-in, ease-out, ease-in-out, cubic-beizer(x1,y1,x2,y2)”
  • transition-delay imposta l’attesa prima di avviare una nuova transizione.

Di seguito mostriamo l’ esempio pratico:

Le animazioni CSS3

Adesso parleremo delle animazioni via css3, che sono una delle proprietà più innovative introdotte con questa specifica.
La prima cosa da fare è impostare la regola @keyframes seguita dal nome scelto per identificare tutta l’animazione e dove vengono inserirti tutti parametri dell’animazione. Per avviare e chiudere l’animazione si può scegliere tra la forma letterale “from e to” o o quella numerica “0% a 100%”.

Una volta impostato il tipo di animazione tramite @keyframes useremo le seguenti proprietà per impostare quale tag html usufrirà di tale animazione:

  • animation-name richiamerà il keyframes prescelto
  • animation-delay imposta il ritardo con cui far partire l’animazione
  • animation-duration imposterà la durata
  • animation-iteration-count decideremo quante volte si vorrà ripetere l’ animazione
  • animation-direction si può decidere se la ripetizione dell’animazione deve ripartire dallo stato iniziale con il parametro normal o effettuare l’ animazione a percorso inverso per avere un andamento più fluido tramite il parametro alternate.

Di seguito mostriamo l’ esempio pratico:

Naturalmente, essendo ancora allo stato di working draft, l’uso in produzione va valutato con molta attenzione senza abusare di queste nuove funzionalità.

  • Cristian Sannino

    Articolo molto utile per chi si avvicina alle nuove funzionalità del CSS3, grazie 🙂

  • Qualcuno ha detto se funzionano sui browser della Microsoft? Non ce n’era bisogno vero? 😀

    M.

Shares