Repeated Action

Repeated action is used to repeat an animation. There are the two types of repeat attributes allow you to repeat an animation.

repeatCount: It is set to an integer value telling how many times you want a particular animation to repeat.

repeatDur: It is set to a time telling how long the repetition should last.

Synchronizing an animation with a repetition

Example

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">

<circle cx="30" cy="60" r="30" style="fill: purple; fill-opacity: .4; stroke: black;">
<animate id="circle-anim" attributeName="cx" attributeType="XML"
 begin="0s" dur="6s" repeatCount="4"
 from="60" to="260" fill="freeze"/>
</circle>

<circle cx="250" cy="150" r="30" style="fill: green; fill-opacity: .4; stroke: black;">
<animate attributeName="cx" attributeType="XML"
 begin="circle-anim.repeat(1)+.5s" dur="8s" repeatDur="12s"
 from="260" to="60" fill="freeze"/>
</circle>

</svg>
</body>
</html>

Test it Now

Next TopicSVG Set Element

← prev next →