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;
Follow by Email
Facebook
Twitter
Telegram