Ogni animazione CSS deve contenere un blocco Keyframe.
Si tratta di una cosiddetta @-rule, uno di quei costrutti CSS introdotti dal simbolo @.
Nelle animazioni CSS3 per introdurre il blocco delle dichiarazioni usiamo @-keyframes. Nell’esempio abbiamo @-webkit-keyframes per via del prefisso proprietario.
Subito dopo @-keyframes va inserito il nome dell’animazione. Nell’esempio è stato usato ‘pulse’, ma può essere un nome a nostro piacimento.
Tutto quello che segue nella dichiarazione va racchiuso tra parentesi graffe.
E cosa troviamo tra le parentesi graffe? Troviamo 4 dichiarazioni introdotte da percentuali: 0%, 33%, 67%, 100%. 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.
In 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.
Tra i due keyframe necessari, 0% e 100% (from e to), possiamo inserire altri fotogrammi chiave. Questi vanno sempre dichiarati attraverso valori in percentuale. Ma come vanno interpretati?
Semplice. Si supponga di creare un’animazione di 10 secondi. Impostando il primo fotogramma chiave al 33%, esso sarà attivo al 33% di 10 secondi, ovvero a 3,3 secondi. E così via.
Non rimane che chiarire l’ultimo aspetto. A ciascun keyframe, lo accennavamo, è associato un blocco con delle proprietà CSS. Per ogni blocco inseriremo le proprietà che definiscono l’aspetto e la posizione dell’elemento.
Il nostro div parte per esempio con uno sfondo rosso (background-color: red;), poi al 33% dell’animazione lo sfondo diventa blue (background-color: blue;), alla fine di nuovo rosso, passando per il verde al 67% dell’animazione. Nel contempo viene modificata l’opacità dell’oggetto e quest’ultimo subisce trasformazioni come il ridimensionamento (scale) e la rotazione (rotate).
Con il primo blocco siamo però a metà dell’opera, abbiamo solo impostato i fondamenti dell’animazione senza associarla ad alcun elemento.
L’associazione avviene nel CSS partendo dal selettore legato all’elemento da animare.
Noi abbiamo un div con classe .pulsedbox. Per cui, nel CSS, andremo a scrivere:
.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
In questa dichiarazione sono contenute le proprietà fondamentali del modulo.
animation-name
Con la proprietà animation-name si definisce il nome dell’animazione da associare ad un elemento. Il nome deve corrispondere a quello impostato nella regola @-keyframes. Nel nostro caso, infatti, abbiamo usato ‘pulse’.
animation-duration
Questa proprietà serve a impostare la durata dell’animazione. Il valore va espresso in secondi.
animation-iteration-count
La proprietà animation-iteration-count è usata per 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.
animation-timing-function
Questa proprietà è del tutto analoga alla proprietà transition-timing-function vista nelle transizioni CSS3: 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;
linear;
ease-in;
ease-out;
ease-in-out;
cubic-bezier.
Oltre a quelle usate nell’esempio, almeno un paio di altre proprietà vanno menzionate.
Con animation-direction possiamo far sì che l’animazione ripetuta venga eseguita in ordine inverso. Basta assegnare alla proprietà il valore reverse.
Per impostare invece un ritardo nell’esecuzione dell’animazione, invece, possiamo usare animation-delay con un valore espresso in secondi.
------
<title>Animazioni CSS3 - Esempio - Guida CSS3 HTML.it</title>
<style type=" text/css" media=" screen" >
@-webkit-keyframes ' pulse' {
from {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
to {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background-color: red;
width: 40%;
padding: 0.2em 1em;
margin: 6em;
}
</style>
</head>
<body>
<div class=" pulsedbox" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
