---
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]">&lt;?xml version="1.0"?&gt;
&lt;svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect x="10" y="10" width="100" height="100"&gt;
    &lt;animate attributeType="XML" attributeName="x" from="-100" to="120"
        dur="10s" repeatCount="indefinite"/&gt;
  &lt;/rect&gt;
&lt;/svg&gt;</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", "&lt;animate&gt;")}}</td>
   <td>{{Spec2("SVG Animations 2")}}</td>
   <td>Nessun cambiamento</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "&lt;animate&gt;")}}</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>