diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/it/web/svg/element/animate | |
parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip |
initial commit
Diffstat (limited to 'files/it/web/svg/element/animate')
-rw-r--r-- | files/it/web/svg/element/animate/index.html | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/files/it/web/svg/element/animate/index.html b/files/it/web/svg/element/animate/index.html new file mode 100644 index 0000000000..b5fa44b0cc --- /dev/null +++ b/files/it/web/svg/element/animate/index.html @@ -0,0 +1,115 @@ +--- +title: <animate> +slug: Web/SVG/Element/animate +tags: + - Animazione SVG + - Elemento + - SVG +translation_of: Web/SVG/Element/animate +--- +<div>{{SVGRef}}</div> + +<div>L'elemento SVG <code>animate</code> è usato per animare un attributo o una proprietà di un elemento nel tempo.</div> + +<div>Normalmente viene inserito dentro l'elemento o viene inserito un riferimento con l'attributo <code>href</code> dell'elemento bersaglio.</div> + +<h2 id="Uso">Uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributi">Attributi</h2> + +<h3 id="Attributi_globali">Attributi globali</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Attributi di elaborazione condizionale</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Attributi principali</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_event_attributes">Attributi dell'evento dell'animazione</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink_attributes">Attributi Xlink</a> »</li> + <li><a href="en-US/docs/Web/SVG/Attribute#AnimationAttributeTarget">Attributi bersaglio degli attributi di animazione</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_timing_attributes">Attributi del tempo dell'animazione</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_value_attributes">Attributi dei valori dell'animazione</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Animation_addition_attributes">Attributi aggiuntivi dell'animazione</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Attributi_specifici">Attributi specifici</h3> + +<ul> + <li>{{SVGAttr("attributeName")}}</li> + <li>{{SVGAttr("attributeType")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("to")}}</li> + <li>{{SVGAttr("dur")}}</li> + <li>{{SVGAttr("repeatCount")}}</li> +</ul> + +<h2 id="Interfaccia_DOM">Interfaccia DOM</h2> + +<p>Questo elemento implementa l'interfaccia <code><a href="/en-US/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code>.</p> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[6-7]"><?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"> + <animate attributeType="XML" attributeName="x" from="-100" to="120" + dur="10s" repeatCount="indefinite"/> + </rect> +</svg></pre> + +<h3 id="Risultato">Risultato</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}</p> + +<h2 id="Problemi_di_accessibilità">Problemi di accessibilità</h2> + +<p><span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> <span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> <span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> <span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> <span style="">L'animazione lampeggiante e lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese. Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la Query media di movimento ridotto per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</span> L'animazione lampeggiante può essere problematica per le persone con problemi cognitivi come il disturbo da deficit di attenzione e iperattività (ADHD). Inoltre, alcuni tipi di movimento possono essere un fattore scatenante per i disordini vestibolari, l'epilessia e l'emicrania e la sensibilità scozzese.<br> + <br> + Prendi in considerazione la possibilità di fornire un meccanismo per mettere in pausa o disattivare l'animazione e utilizzare la <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Query multimediale a movimento ridotto</a> per creare un'esperienza gratuita per gli utenti che hanno espresso la preferenza per nessuna esperienza animata.</p> + +<p>Articoli in inglese sull'argomento:</p> + +<ul> + <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> + <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Animazioni SVG 2", "#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se desideri contribuire ai dati, fai riferimento a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una PR.</div> + +<p>{{Compat("svg.elements.animate")}}</p> +</div> |