CSS Animations

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

Storia

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.

Proprietà
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

Esempio di animazione SVG con i CSS

Animazione SVG

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].

Supporto dei browser

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].

Polemica

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].

Esempio

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

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

Note

1. CSS Animations Level 1, su w3.org. URL consultato il 3 febbraio 2021.
2. (EN) Firefox 5 release notes, in The Mozilla Foundation, 21 giugno 2011.
3. (EN) Dave Hyatt, CSS Animation, in Surfin’ Safari, 31 ottobre 2007.
4. (EN) Dean Jackson, CSS Animation, in Surfin’ Safari, 5 febbraio 2009.
5. HTML5test - How well does your browser support HTML5?, su html5test.com. URL consultato il 3 febbraio 2021.
6. (EN) Jonathan Snook, CSS Animations in Safari, in Snook.ca, 31 ottobre 2007.
7. (EN) Arnold Kim, CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?, in MacRumors.com, 6 febbraio 2009.
8. (EN) Robert Palmer, CSS Animation to replace need for Flash in MobileSafari? Not likely, in The Unofficial Apple Weblog, 6 febbraio 2009. URL consultato il 21 novembre 2011 (archiviato dall'url originale il 9 febbraio 2009).
9. (EN) Vincent Ferrari, CSS Animations: A Flash Substitute?, in Apple Thoughts, 9 febbraio 2009.
10. adobe, su theblog.adobe.com. URL consultato il 3 febbraio 2021 (archiviato dall'url originale il 2 dicembre 2017).

Voci correlate

• Animazione flash
• Animazione SVG

Collegamenti esterni

• (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.