dur

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The dur attribute indicates the simple duration of an animation.

You can use this attribute with the following SVG elements:

Example

html
<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

Specification
SVG Animations Level 2
# DurAttribute

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
dur
Chrome – Full support
Chrome 2 (Release date: 2009-05-21)
footnote Full support
Edge – Full support
Edge 79 (Release date: 2020-01-15)
footnote Full support
Firefox – Full support
Firefox 4 (Release date: 2011-03-22)
footnote Full support
Opera – Full support
Opera 15 (Release date: 2013-07-02)
footnote Full support
Safari – Full support
Safari 4 (Release date: 2009-06-08)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 14 (Release date: 2013-05-21)
footnote Full support
Safari on iOS – Full support
Safari on iOS 3.2 (Release date: 2010-04-03)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 3.2 (Release date: 2010-04-03)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support