W3cubDocs

/SVG

dur

The dur attribute indicates the simple duration of an animation.

Five elements are using this attribute: <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>

<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate attributeType="XML" attributeName="y" from="0" to="50"
        dur="1s" repeatCount="indefinite"/>
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate attributeType="XML" attributeName="y" from="0" to="50"
        dur="3s" repeatCount="indefinite"/>
  </rect>
</svg>

Usage notes

Value <clock-value> | media | indefinite
Default value indefinite
Animatable No
<clock-value>
This value specifies the length of the simple duration. The value must be greater than 0 and can be expressed with hours (h), minutes (m), seconds (s) or milliseconds (ms). Itʼs possible to combine those time representations to create some complex durations like hh:mm:ss.iii or mm:ss.iii.
media
This value specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media.
(For animation elements the attribute will be ignored if media is specified.)
indefinite

This value specifies the simple duration as indefinite.

Note: the interpolation will not work if the simple duration is indefinite (although this may still be useful for <set> elements).

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
dur ? ? ? No ? ?
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
dur ? ? ? ? ? ?

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dur