I'd like to add a delay to each iteration of an SVG animation loop. Here's a simple example.
Using begin
only delays the first iteration, so is there a way to delay every iteration?
You can add the end
event of a SMIL animated element to the begin
attribute.
Also, you can add multiple values, separated by ;
to this begin
attribute :
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<circle cx="50" cy="50" r="15" fill="blue">
<animate id="op" attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="3s" begin="3s;op.end+3s" />
</circle>
</svg>