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.

Thedur attribute indicates the simple duration of an animation.

You can use this attribute with the following SVG elements:

Example

html,body,svg {  height: 100%;}

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 likehh:mm:ss.iii ormm:ss.iii.
media: This value specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media.(Foranimation elements the attribute will be ignored ifmedia is specified.)
indefinite: This value specifies the simple duration as indefinite.