Animazioni

Possiamo creare delle semplici animazioni con la tecnica delle transazioni. Con la proprietà transition possiamo definire in quanto tempo una proprietà viene modificata. Vediamo tutte le proprietà singolarmente:

• transition-propertry – la proprietà sulla quale applicare l’effetto;
• transition-duration – la durata dell’effetto di transizione;
• transition-timing-function – andamento dell’effetto di transizione;
  • linear – velocità costante;
  • ease – tende ad accelerare;
  • ease-in – un inizio lento;
  • ease-out – una fine lenta;
  • ease-in-out – inizio e fine lenta;
  • cubic-beizier(n, n, n, n) – definire le varie fasi dell’effetto;
• transition-delay – ritardo dell’effetto;

Possiamo anche creare delle vere animazioni tramite la proprietà animation. Le animazioni vengono definite tramite la regola @keyframes al cui interno sono indicati due o più fotogrammi.

Le animazioni possono essere eseguite solo una volta o più volte fino all’infinito. Possiamo anche definire la direzione con animation-direction:

• normal – riproduzione in avanti;
• reverse – riproduzione all’indietro;
• alternate – riproduzione avanti e poi indietro;
• alternate-reverse – riproduzione all’indietro e poi in avanti;