CSS Animations

CSS Animations è un modulo proposto per i CSS, che consente l'animazione di elementi XML utilizzando direttamente i CSS.

Mentre la pseudo-classe :hover è stata utilizzata per anni per generare animazioni rudimentali, le estensioni dei CSS nel regno dell'animazione sono state minime fino alla fine del 2000. Già nel 2007, WebKit aveva annunciato la sua intenzione di includere animazioni, transizioni CSS, e di farle diventare funzioni di WebKit. WebKit ha inoltre annunciato l'implementazione dell'animazione implicita ed esplicita, attraverso i CSS, a febbraio 2009. L'animazione CSS è stata anche presentata come una funzionalità dei CSS3, specificamente Nella bozza in corso di elaborazione da parte del W3C.

La grafica vettoriale scalabile supporta la regola @keyframes, consentendo l'animazione di un insieme limitato di trasformazioni. Firefox e Chrome utilizzavano rispettivamente le estensioni @ -moz-keyframes e @ -webkit-keyframes prima che @keyframes fosse aggiunto alla specifica CSS3^[1].

A partire da giugno 2011, Firefox 5 include il supporto per l'animazione CSS.^[2] L'animazione CSS è disponibile anche come modulo nelle nightly build di WebKit così come in Google Chrome, Safari 4 e 5 e Safari per iPhone, Android 2.xe 3.x, la OS6 RIM web browser, con il prefisso -webkit-.^[3][4] È utilizzato anche in iTunes 9 per supportare i file iTunes LP. Dal 2019 anche Microsoft Edge supporta l'animazione CSS3^[5].

Le specifiche dell'animazione CSS hanno portato preoccupazione a chi preferisce l'animazione con JavaScript^[6] o, in misura meno diffusa, SMIL; altri hanno affermato che si tratta di una mossa della Apple, sponsor principale del progetto WebKit, di aggirare l'inserimento di Adobe Flash (e le animazioni flash obbligatorie) sulla linea di iPhone OS dell'azienda di dispositivi mobili che usa Safari.^[7][8][9] Dal 31 dicembre 2020 Adobe Flash fu comunque abbandonato dagli sviluppatori Adobe^[10].

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: wikipedia;
  animation-duration: 4s;
}

@keyframes wikipedia {
  from {background-color: red;}
  to {background-color: yellow;}
}

• Animazione flash
• Animazione SVG

• (EN) Initial Apple Proposal, su webkit.org. URL consultato il 30 aprile 2019 (archiviato dall'url originale il 30 aprile 2008).
• (EN) CSS Animations Module Level 3 draft on the W3C website
• (EN) CSS loaders generator for AJAX/JQuery, su cssload.net.

Portale Design

Portale Informatica