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