Animazioni con CSS3

Quante volte avreste voluto dare un tocco "dinamico"alla vostra pagina, ma non avete sufficienti conoscenze in Javascript? Da oggi questo problema è risolto, grazie ai CSS3! Utilizzando infatti le proprietà keyframes e animation potrete animare il vostro contenitore senza l'ausilio di linguaggi esterni.

Compatibilità

• -moz-animation *
  • @-moz-keyframes
• -webkit-animation **
  • @-webkit-keyframes
• animation ***
  • @keyframes

Non supportato da Firefox in versioni precedenti la 5, Internet Explorer precedenti la 10 ed Opera precedenti la 12. Per informazioni dettagliate caniuse.com.

• * Firefox 5+
• *** Firefox 16+
• ** Safari 5+, Chrome 10+
• *** Internet Explorer 10+
• *** Opera 12.1+

Animation properties: la proprietá animation

La multiple animazioni possono essere specificate separandole da una virgola, anche se esiste la possibilità di usare notazioni separate.

animation: (1)animationName (2)4s (3)linear (4)1.5s (5)infinite (6)reverse (7)none

• 1 Il nome dell'animazione come specificato nel keyframes. Molte  propietà CSS sono suscettibii ad animazione. Se sostituite il nome con "none" l'animazione non sarà eseguita.
• 2 La durata dell'animazione, in questo caso dura 4 secondi. Il valore predefinito è 0 (nessuna animazione). I valori negativi non sono ammessi.
• 3 Opzionale. Descrive come i valori intermedi usati durante l'animazione vengono calcolati. Identico il set di valori, basati sulle curve di Bèziers, che è possibile utilizzare:
  ease – l'animazione parte veloce per terminare dolcemente, si ottiene anche specificando il valore come cubic-bezier(0.25, 0.1, 0.25, 1.0);
  linear – l'animazione avviene in modo lineare, ottenibile anche con cubic-bezier(0.0, 0.0, 1.0, 1.0);
  ease-in – l'animazione parte piano per velocizzarsi sul finale, ottenibile anche con cubic-bezier(0.42, 0, 1.0, 1.0);
  ease-out – l'opposto dell'animazione precedente ovvero parte velocemente per poi fermarsi con un rallentamento, ottenibile anche con cubic-bezier(0, 0, 0.58, 1.0);
  ease-in-out – un miscuglio delle ultime due animazioni ovvero parte piano, acquista velocità nel mezzo, per poi terminare dolcemente, si ottiene anche con cubic-bezier(0.42, 0, 0.58, 1.0).
• 4 Opzionale. L'animazione inizia con un ritardo di 1,5 secondi. Se non è impostata o è impostata a 0 l'animazione inizierà immediatamente.
• 5 Opzionale. Impostare il numero di volte che un'animazione sarà ripetuta. Il valore può essere un numero intero pari o superiore a 1 oppure la parola infinite, con cui si crea una sorta di loop infinito. Il valore di default è 1.
• 6 Opzionale. La direzione dell'animazione. Possiamo far sì che l'animazione ripetuta venga eseguita in ordine inverso: basta assegnare alla proprietà il valore reverse.
• 7 Opzionale. specifica in che modo gli stili dei css vengono applicati all’inizio e alla fine dell’animazione. Può avere i seguenti valori:
  • none: gli effetti dell’animazione sono visibili solo durante la riproduzione effettiva l’animazione
  • forwards: il fotogramma finale dell’animazione continua ad applicarsi anche dopo la ripetizione finale dell’animazione completa
  • backwards: Il fotogramma iniziale dell’animazione viene utilizzato non appena lo stile dell’animazione viene applicato ad un elemento. Questo riguarda solo le animazioni che hanno un valore diverso da zero per animation-delay
  • both: Il fotogramma iniziale dell’animazione viene utilizzato non appena lo stile dell’animazione viene applicato ad un elemento e il fotogramma finale dell’animazione continua ad applicarsi anche dopo la ripetizione finale dell’animazione completa. Questo riguarda solo le animazioni che hanno un valore diverso da zero per animation-delay.

Keyframes

@keyframes (1)animationName {  	
   (2)0% {top: 0px}  	
   (3) 33% {top: 50px; (4)animation-timing-function: ease-out}  
	(5)100% {top: 100px; left: 10px}  
}

• 1 Il nome dell'animazione. Deve coincidere con il punto 1 delle propietà delle animazioni.
• 2 Ciascuna dichiarazione contiene proprietà CSS che definiscono l'aspetto e/o la posizione dell'oggetto. Ciascuna dichiarazione corrisponde a un keyframe dell'animazione. Chiariamo bene. n qualunque animazione vanno definiti almeno 2 stati di un oggetto, quello iniziale e quello finale. Nelle animazioni CSS3 lo stato iniziale va dichiarato con il valore 0% oppure con la parola chiave from. Lo stato finale con il valore 100% oppure con la parola chiave to.
• 3 Opzionale. Al  33% del tempo impostato per l'animazione, l'elemento si posiziona in top:50px.
• 4 Opzionale. descrive come i valori intermedi usati durante l’animazione vengono calcolati (punto 3 delle propietá delle animazioni)
• 5 100%, fine dell'animazione. il valore top dell'elemento é cambiato ad 80px spostandolo verso il basso. Inoltre l'elemento ha adottato una posizione a sinistra di 10px.

Notazioni separate

Per una diversa impostazione grafica delle proprietà di animazione sopra utilizzate.

animation-name: animationName

animation-duration: 4s

animation-timing-function: linear

animation-delay: 1.5s

animation-iteration-count: infinite

animation-direction: alternate

animation-fill-mode: none

ESEMPIO

Specificare due animazioni contemporaneamente

animation: (1)changeColor 3s infinite, (2)changeSize 2s ease-in 1s infinite

(3)@keyframes changeColor  {  
0% {  		
background-color: red;  		
border-color: black;  	
}  	
100% { 
background-color: green;  		
border-color: yellow;  	
    }  
}  
(4)@keyframes changeSize  {  	
        0% {transform: scale(1)}  	
        65% {transform: scale(1.2)}  	
        100% {transform: scale(1.4)}  
}  

• 1 La prima animazione per l'elemento ha una durata di 3 secondi per ogni iterazione e si ripete all'infinito. In assenza di timing-function il valore predefinito è linear.
• 2 La seconda animazione dura 2 secondi ed ha una funzione timing-function  ease-in. Si inizia con un ritardo di 1 secondo.
• 3 Il keyframes della prima animazione. L'elemento parte da uno sfondo di colore rosso e bordi neri e termina con sfondo verde e bordi gialli.
• 4 Il keyframes della seconda animazione, comincia con le dimensione originale dell'elemento, si ridimensiona 1.2 volte al 65% e finisce per riprendere la dimensione originale.

L'animazione Blinking

animation: (1) blink 1s step-end infinite

(2)@keyframesblink {  	
  0% {background-color: blue}  	
  50% {background-color: black}  
}  

• 1 Dura un secondo e viene eseguita all'infinito.
• 2 Il colore di sfondo cambia dal blu al nero

Per approfondire vi consigliamo W3C site, Safari site  MDN (include informazioni di compatibilità per le versioni precedenti dei browsers).