Direttiva @-keyframes

E' possibile animare un elemento html attraverso la direttiva @-keyframes messa a disposizione da CSS3

I tre elementi necessari per creare un animazione

Per creare un animazione avremo bisogno:

1. Elemento html da animare ( e se lo si desidera delle proprietà css associate inizialmente ad esso)
2. Creare un blocco di animazione
3. Associare il blocco di animazione all'elemento

Elemento html

<div class="elemento">
<p>Lorem ipsum dolor sit amet</p>
</div>

Proprietà css dell'elemento html

Le proprietà dell'elemento possono essere considerate come l'aspetto statico e/o "punto di partenza" dell'elemento stesso.
In realtà l'elemento da animare può anche non contenere delle proprietà iniziali, queste però risultano utili nel momento in cui vogliamo che esso abbia un determinato aspetto prima dell'avvio di un animazione, che parte, a seguito di un evento definito tramite una pseudo-classe (es. .elemento:hover).

div.elemento {
background-color: red;
width: 40%;
padding: 10px;
margin: 5px;
}

Creazione del blocco di animazione

Il "blocco di animazione" è un blocco di codice a sé stante, inscritto sempre all'interno del nostro foglio-di-style css, in quale non assumerà nessuna utilità se non verrà successivamente associato ad un elemento.
E' possibile creare un blocco di animazione mediante la direttiva at-rules @-webkit-keyframes, successivamente identificabile unicamente mediante l'attribuzione di un nome 'animazione'.
La timeline dell'animazione è definita mediante i selettori percentuali che creano dei veri e propri keyframe e possono assumere valori da 0%(iniziale) a 100%(finale)

@-webkit-keyframes 'animazione' {
0% {
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);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}

Note: 
1. timeline gestina con valori percentuali da 0% a 100%
2. il nome dell'animazione 'animazione' può assumere qualunque valore 

@-webkit-keyframes 'animazione' {
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);
}
}

Note: la differenza sostanziale sta nell'utilizzo all'interno della timeline di from (0%) e to (100%)

Associare l'animazione creata all'elemento esistente

Creato il blocco di animazione è necessario associare quest'ultimo all'elemento desiderato.
E' possibile farlo mediante l'utilizzo di proprietà specifiche dedicate alle animazioni:

.elemento { /* classe dell'elemento da animare */
-webkit-animation-name: animazione; /* associazione dell'animazione creata ( il valore è il nome dato all'animazione) */
-webkit-animation-duration: 4s; /* definizione della durata totale dell'animazione */
-webkit-animation-iteration-count: 1; /* impostare in numero di ripetizioni */ 
-webkit-animation-timing-function: linear; /* curve di Bèziers da utilizzare */
}

Note: come precedentemente accennato è possibile associare la partenza di un animazione al verificarsi di uno specifico "stato" ,per esempio :hover. In tal caso sarà sufficiente indicarlo al momento dell'associazione 

Elenco di tutte le proprietà a disposizione