CSS Animations: differenze tra le versioni

Versione delle 21:44, 10 dic 2011

Versione attuale delle 17:32, 2 set 2024

(15 versioni intermedie di 12 utenti non mostrate)

Riga 1:

{{CSS1}}

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

== Storia ==

Mentre la pseudo-classe <code>:hover</code> è 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|animazione implicita ed esplicita]], attraverso i CSS, a Febbraiofebbraio 2009. L'animazione CSS è stata anche presentata come una funzionalità dei CSS3, specificamente Nella bozza in corso di elaborazione da parte del [[W3C]].

{| class="wikitable"

!Proprietà

|-

|@keyframes

|-

|animation-name

|-

|animation-duration

|-

|animation-delay

|-

|animation-iteration-count

|-

|animation-direction

|-

|animation-timing-function

|-

|animation-fill-mode

|-

|animation

|}

[[File:Epicyclic gearing animation.svg|alt=Esempio di animazione SVG con i CSS|miniatura|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<ref>{{Cita web|url=http://www.w3.org/TR/css-animations-1/Overview.html|titolo=CSS Animations Level 1|accesso=2021-02-03}}</ref>.

== Supporto dei browser ==

A partire da giugno 2011, [[Mozilla Firefox 5|Firefox 5]] include il supporto per l'animazione CSS.<ref>{{en}} {{Cita pubblicazione |url=https://www.mozilla.com/en-US/firefox/5.0/releasenotes/ |titolo=Firefox 5 release notes |data=2011-06-21 |rivista=The Mozilla Foundation}}</ref> L'animazione CSS è disponibile anche come modulo nelle ''nightly build'' di [[WebKit]] così come in [[Google Chrome]], [[Safari (browser)|Safari]] 4 e 5 e Safari per [[iPhone]], [[Android]] 2.xe 3.x, la OS6 RIM web [[browser]], con il prefisso <code>-webkit-</code>.<ref>{{en}} {{Cita pubblicazione |url=httphttps://webkit.org/blog/138/css-animation/ |titolo=CSS Animation |nome=Dave |cognome=Hyatt |data=2007-10-31 |rivista=Surfin’ Safari}}</ref><ref>{{en}} {{Cita pubblicazione |url=httphttps://webkit.org/blog/324/css-animation-2/ |titolo=CSS Animation |nome=Dean |cognome=Jackson |data=2009-02-05 |rivista=Surfin’ Safari}}</ref> È utilizzato anche in [[iTunes]] 9 per supportare i file [[iTunes LP]]. Dal 2019 anche [[Microsoft Edge]] supporta l'animazione CSS3<ref>{{Cita web|url=https://html5test.com/compare/browser/edge-12.html|titolo=HTML5test - How well does your browser support HTML5?|sito=html5test.com|accesso=2021-02-03}}</ref>.

== Polemica ==

Le specifiche dell'animazione CSS hanno portato preoccupazione a chi preferisce l'animazione con [[JavaScript]]<ref>{{en}} {{Cita pubblicazione |url=http://snook.ca/archives/javascript/css_animations_in_safari/ |titolo=CSS Animations in Safari |nome=Jonathan |cognome=Snook |rivista=Snook.ca |data=2007-10-31}}</ref> o, in misura meno diffusa, SMIL; altri hanno affermato che si tratta di una mossa della [[Apple Inc.|Apple]], sponsor principale del progetto WebKit, di aggirare l'inserimento di [[Adobe Flash]] (e le [[Animazione flash|animazioni flash]] obbligatorie) sulla linea di [[iPhone OS]] dell'azienda di dispositivi mobili che usa [[Safari (browser)|Safari]].<ref>{{en}} {{Cita pubblicazione |url=http://www.macrumors.com/2009/02/06/css-animation-coming-to-safari-already-in-iphone-less-dependence-on-flash/ |titolo=CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? |rivista=MacRumors.com |data=2009-02-06 |nome=Arnold |cognome=Kim}}</ref><ref>{{en}} {{Cita pubblicazione |url=http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/ |titolo=CSS Animation to replace need for Flash in MobileSafari? Not likely |rivista=The Unofficial Apple Weblog |data=2009-02-06 |nome=Robert |cognome=Palmer |accesso=21 novembre 2011 |dataarchivio=9 febbraio 2009 |urlarchivio=https://web.archive.org/web/20090209223736/http://www.tuaw.com/2009/02/06/css-animation-to-replace-need-for-flash-in-mobilesafari-not-lik/ |urlmorto=sì }}</ref><ref>{{en}} {{Cita pubblicazione |url=http://www.applethoughts.com/news/show/92481/css-animations-a-flash-substitute.html |titolo=CSS Animations: A Flash Substitute? |rivista=Apple Thoughts |data=2009-02-09 |nome=Vincent |cognome=Ferrari}}</ref> Dal 31 dicembre 2020 Adobe Flash fu comunque abbandonato dagli sviluppatori Adobe<ref>{{Cita web|url=https://theblog.adobe.com/adobe-flash-update/|titolo=adobe|accesso=3 febbraio 2021|dataarchivio=2 dicembre 2017|urlarchivio=https://web.archive.org/web/20171202123704/https://theblog.adobe.com/adobe-flash-update/|urlmorto=sì}}</ref>.

== Voci correlateEsempio ==

<syntaxhighlight lang="css+django">

* [[Animazione flash]]

div {

* [[Animazione SVG]]

width: 100px;

height: 100px;

background-color: red;

animation-name: wikipedia;

animation-duration: 4s;

}

@keyframes wikipedia {

from {background-color: red;}

to {background-color: yellow;}

}

</syntaxhighlight>

== Note ==

<references/>

== Voci correlate ==

* [[Animazione flash]]

* [[Animazione SVG]]

== Collegamenti esterni ==

* {{en}}cita [web|1=http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html|2=Initial Apple Proposal|lingua=en|accesso=30 aprile 2019|dataarchivio=30 aprile 2008|urlarchivio=https://web.archive.org/web/20080430041229/http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html Initial Apple Proposal]|urlmorto=sì}}

* {{en}} [httphttps://dev.w3.org/csswg/css3-animations/ CSS Animations Module Level 3] draft on the [[World Wide Web Consortium|W3C]] website

* {{cita web|http://cssload.net|CSS loaders generator for AJAX/JQuery|lingua=en}}

{{portale|design|informatica}}

{{DEFAULTSORT:Css Animations}}

[[Categoria:CSS]]

[[Categoria:Tecnologie per il Web]]

[[Categoria:Software Apple]]

[[de:CSS Animations]]

[[en:CSS Animations]]