Animazioni con CSS3

Impariamo cosa sono e come si usano i keyframes

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).

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.