---
title: animate
slug: Web/SVG/Element/animate
tags:
  - Element
  - SVG
  - SVG Animation
translation_of: Web/SVG/Element/animate
---
<div>{{SVGRef}}</div>

<p>Das <code>animate</code> Element wird innerhalb eines Shape Elements angelegt und definiert, wie ein Attribut des Elements sich durch die Animation verändert.Das Attribut wird sich innerhalb der angegebenen Dauer vom initialen- zum End-Wert ändern.</p>

<p>Es wird normalerweise innerhalb des Elements eingefügt, oder referenziert von einem <code>href</code> attribut des Zielelements.</p>

<h2 id="Usage_context">Usage context</h2>

<p>{{svginfo}}</p>

<h2 id="Attribute">Attribute</h2>

<h3 id="Globale_Attribute">Globale Attribute</h3>

<ul>
 <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="SVG/Attribute#AnimationEvent">Animation event attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#XLink" title="SVG/Attribute#XLink">Xlink attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Animation timing attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Animation value attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
</ul>

<h3 id="Spezifische_Attribute">Spezifische Attribute</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="DOM_Schnittstelle">DOM Schnittstelle</h2>

<p>Dieses Element implementiert die <code><a href="/en-US/docs/DOM/SVGAnimateElement" title="DOM/SVGAElement">SVGAnimateElement</a></code> Schnittstelle.</p>

<h2 id="Beispiel">Beispiel</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="Ergebnis">Ergebnis</h3>

<p>{{EmbedLiveSample("Example", 120, 120)}}</p>

<h2 id="Bedenken_bezüglich_der_Barrierefreiheit">Bedenken bezüglich der Barrierefreiheit</h2>

<p>Blinkende und blitzende Animation kann für Menschen mit kognitiven Problemen wie Aufmerksamkeitsdefizit Hyperaktivitätsstörung (ADHS) problematisch sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein.</p>

<p>Erwägen Sie, einen Mechanismus zum Anhalten oder Deaktivieren der Animation vorzusehen, sowie die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> zu verwenden, um eine komplementäre Erfahrung für Benutzer zu schaffen, die eine Präferenz für keine Animationen haben.</p>

<ul>
 <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designen von sicheren Web Animationen für Bewegungsempfindlichkeit - Ein Artikel der Extraklasse</a></li>
 <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Eine Einführung in die Reduced Motion Media Query | CSS-Tricks</a></li>
 <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsives Design für Bewegungen | WebKit</a></li>
 <li><a href="https://developer.mozilla.org/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 Verstehen der WCAG, Guideline 2.2 Erklärungen</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Verstehen der Erfolgskriteren 2.2.2  | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG Animations 2", "#AnimateElement", "&lt;animate&gt;")}}</td>
   <td>{{Spec2("SVG Animations 2")}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "&lt;animate&gt;")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initiale Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatiblität">Browser Kompatiblität</h2>

<div>
<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wurde von strukturierten Daten generiert. Wenn Du etwas zu diesen Daten beitragen willst dann checke <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> aus und sende uns einen Pull Request.</div>

<p>{{Compat("svg.elements.animate")}}</p>
</div>

<p> </p>