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:
p {
-moz-transition-property: background-color, border;
-moz-transition-duration: 0.5s, 1s;
-moz-transition-timing-function: linear, ease-in;
-moz-transition-delay: 0.5s, 1s;
-webkit-transition-property: background-color, border;
-webkit-transition-duration: 0.5s, 1s;
-webkit-transition-timing-function: linear, ease-in;
-webkit-transition-delay: 0.5s, 1s;
-o-transition-property: background-color, border;
-o-transition-duration: 0.5s, 1s;
-o-transition-timing-function: linear, ease-in;
-o-transition-delay: 0.5s, 1s;
transition-property: background-color, border;
transition-duration: 0.5s, 1s;
transition-timing-function: linear, ease-in;
transition-delay: 0.5s, 1s;
}
p:hover{
-moz-transition-property: background-color, border;
-moz-transition-duration: 0.5s, 1s;
-moz-transition-timing-function: linear, ease-in;
-moz-transition-delay: 0.5s, 1s;
-webkit-transition-property: background-color, border;
-webkit-transition-duration: 0.5s, 1s;
-webkit-transition-timing-function: linear, ease-in;
-webkit-transition-delay: 0.5s, 1s;
-o-transition-property: background-color, border;
-o-transition-duration: 0.5s, 1s;
-o-transition-timing-function: linear, ease-in;
-o-transition-delay: 0.5s, 1s;
transition-property: background-color, border;
transition-duration: 0.5s, 1s;
transition-timing-function: linear, ease-in;
transition-delay: 0.5s, 1s;
}
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:
div {
margin: 50px;
padding: 1em;
width: 400px;
border: thin dotted black;
font: bold 1.3em/1.3em arial, verdana, sans-serif;
cursor:pointer;
position: absolute;
-moz-animation: cinquecolori 6s 5s 3 alternate, slittamento 6s 5s 3 alternate;
-webkit-animation: cinquecolori 6s 5s 3 alternate, slittamento 6s 5s 3 alternate;
animation: cinquecolori 6s 5s 3 alternate, slittamento 6s 5s 3 alternate;
}
@-moz-keyframes cinquecolori {
from {
color: #3b86ca;
animation-timing-function: ease-out;
}
30% {
color: #337Fab;
animation-timing-function: linear;
}
60% {
color: #3b778c;
animation-timing-function: linear;
}
90% {
color: #67696b;
animation-timing-function: ease-in;
}
to {
color: #8e584b;
}
}
@-moz-keyframes slittamento {
from {
top: 50px;
animation-timing-function: ease-out;
}
25% {
top: 150px;
animation-timing-function: linear;
}
50% {
top: 200px;
animation-timing-function: linear;
}
75% {
top: 150px;
animation-timing-function: ease-in;
}
to {
top: 300px;
}
}
@-webkit-keyframes cinquecolori {
from {
color: #3b86ca;
animation-timing-function: ease-out;
}
30% {
color: #337Fab;
animation-timing-function: linear;
}
60% {
color: #3b778c;
animation-timing-function: linear;
}
90% {
color: #67696b;
animation-timing-function: ease-in;
}
to {
color: #8e584b;
}
}
@-webkit-keyframes slittamento {
from {
top: 50px;
animation-timing-function: ease-out;
}
25% {
top: 150px;
animation-timing-function: linear;
}
50% {
top: 200px;
animation-timing-function: linear;
}
75% {
top: 150px;
animation-timing-function: ease-in;
}
to {
top: 300px;
}
}
@keyframes cinquecolori {
from {
color: #3b86ca;
animation-timing-function: ease-out;
}
30% {
color: #337Fab;
animation-timing-function: linear;
}
60% {
color: #3b778c;
animation-timing-function: linear;
}
90% {
color: #67696b;
animation-timing-function: ease-in;
}
to {
color: #8e584b;
}
}
@keyframes slittamento {
from {
top: 50px;
animation-timing-function: ease-out;
}
25% {
top: 150px;
animation-timing-function: linear;
}
50% {
top: 200px;
animation-timing-function: linear;
}
75% {
top: 150px;
animation-timing-function: ease-in;
}
to {
top: 300px;
}
}
Naturalmente, essendo ancora allo stato di working draft, l’uso in produzione va valutato con molta attenzione senza abusare di queste nuove funzionalità.
