|
'''CSS Animations''' è un modulo proposto per i [[CSS]], che consente l'[[animazione]] di elementi [[XML]] utilizzando direttamente i [[CSS]].
{{CSS1}}
{{T|en|informatica|Novembre 2011}}
{{S|programmazione|standard}}
'''CSS Animations''' is a proposed module for [[Cascading Style Sheets]] that allows for the [[animation]] of [[XML]] elements using [[CSS]].
== Storia ==
WhileMentre thela pseudo-classclasse <code>:hover</code> hasè beenstata usedutilizzata toper generateanni rudimentaryper animationsgenerare foranimazioni yearsrudimentali, extensionsle ofestensioni dei CSS intonel theregno realmdell'animazione ofsono animationstate wereminime minimalfino untilalla thefine latedel 2000s2000. AsGià early asnel 2007, [[WebKit]] hadaveva announcedannunciato itsla intentionsua tointenzione includedi CSSincludere animationanimazioni, transitionstransizioni CSS, ande transformsdi asfarle featuresdiventare offunzioni di WebKit. WebKit Itha alsoinoltre announcedannunciato thel'implementazione implementationdell'[[animazione ofimplicita|animazione bothimplicita implicited andesplicita]], explicitattraverso animation throughi CSS, ina Februaryfebbraio 2009. L'animazione CSS animationè hasstata alsoanche beenpresentata putcome forthuna asfunzionalità a feature ofdei CSS3, thespecificamente Nella bozza in ongoingcorso draftdi specificationelaborazione managedda byparte thedel [[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]]
=== SupportoAnimazione del browserSVG ===
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>.
As of June 2011, Firefox 5 includes CSS Animation support.<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> CSS animation is also available as a module in the nightly builds of WebKit as well as [[Google Chrome]], [[Safari (web browser)|Safari]] 4 and 5 and Safari for [[iPhone]], Android 2.x and 3.x, the RIM OS6 web browser, with the <code>-webkit-</code> prefix.<ref>{{en}} {{Cita pubblicazione |url=http://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=http://webkit.org/blog/324/css-animation-2/ |titolo=CSS Animation |nome=Dean |cognome=Jackson |data=2009-02-05 |rivista=Surfin’ Safari}}</ref> It is also used in [[iTunes 9]] to support [[iTunes LP]] files. ▼
== Supporto dei browser ==
▲AsA ofpartire Juneda giugno 2011, [[Mozilla Firefox 5 |Firefox includes5]] CSSinclude Animationil supportsupporto 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 animationè isdisponibile alsoanche availablecome asmodulo a module in thenelle ''nightly buildsbuild'' ofdi [[WebKit ]] ascosì wellcome asin [[Google Chrome]], [[Safari ( web browser)|Safari]] 4 ande 5 ande Safari forper [[iPhone]], [[Android ]] 2. x andxe 3.x, the RIMla OS6 RIM web [[browser ]], withcon il theprefisso <code>-webkit-</code> prefix.<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> ItÈ isutilizzato also usedanche in [[iTunes 9]] to9 supportper supportare i file [[iTunes LP]] . filesDal 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 ==
TheLe specificationspecifiche ofdell'animazione CSS animationhanno hasportato drawnpreoccupazione concerna fromchi thosepreferisce who prefer animationl'animazione throughcon [[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> oro, toin amisura lesser-usedmeno extentdiffusa, [[Synchronized Multimedia Integration Language|SMIL]]; othersaltri havehanno claimedaffermato thatche itsi istratta adi una movemossa bydella [[Apple Inc.|Apple]], thesponsor mainprincipale sponsordel of theprogetto WebKit project, todi sidestepaggirare thel'inserimento inclusion ofdi [[Adobe Flash]] (ande the incumbentle [[FlashAnimazione animationflash|animazioni flash]]s obbligatorie) onsulla thelinea company'sdi [[iPhone OS]] linedell'azienda ofdi mobiledispositivi devicesmobili whichche useusa [[Safari (web 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">
div {
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 ==
== 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}}
[[CategoryCategoria:CSS]]
[[Categoria:Tecnologie per il Web]]
[[Categoria:Software Apple]]
[[de:CSS Animations]]
[[en:CSS Animations]]
| 