SVG animation delay on each repetition
21,919
Solution 1
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>
Solution 2
Define dummy loop and set relative start time. See How to make SVG Loop Animation?
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<rect>
<animate id="o1" begin="0;o1.end" dur="10s"
attributeName="visibility" from="hide" to="hide"/>
</rect>
<circle fill="orange" cx="-50" cy="100" r="20">
<animate begin="o1.begin"
attributeName="cx" from="250" to="50" dur="5.05s"/>
</circle>
<circle fill="blue" cx="150" cy="100" r="50" />
<circle fill="orange" cx="-50" cy="100" r="20">
<animate begin="o1.begin+5s"
attributeName="cx" from="50" to="250" dur="5.05s"/>
</circle>
</svg>
Solution 3
Below an example of "closing eyes"... thanks to the suggestions in this thread.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 16"><g>
<g >
<ellipse cx="9.45" cy="7.7" rx="0.96" ry="0.96" style="stroke: none; fill: black;">
<animate id="op" attributeName="ry" attributeType="XML"
to="0.1"
begin="3s;op.end+3s" dur="0.15s"
fill="remove" repeatCount="2"
/>
</ellipse>
<ellipse cx="14.6" cy="7.8" rx="0.8" ry="0.8" style="stroke: none; fill: black;">
<animate id="op" attributeName="ry" attributeType="XML"
to="0.1"
begin="3s;op.end+3s" dur="0.15s"
fill="remove" repeatCount="2"
/>
</ellipse>
</g>
</svg>
Comments
-
Ben Murden almost 2 years
I'd like to add a delay to each iteration of an SVG animation loop. Here's a simple example.
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> <circle cx="50" cy="50" r="15" fill="blue"> <animate id="op" attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" /> </circle> </svg>
Using
begin
only delays the first iteration, so is there a way to delay every iteration? -
Ben Murden almost 9 yearsMarvellous, thank you! I was confused at first, because I had not realised that this does not work with
repeatCount
. -
Kaiido almost 9 yearswell actually
repeatCount
is still active and theend
event fires at the end of the finiterepeatCount
. -
Ben Murden almost 9 yearsThanks for your answer, but I don't think this specifically addresses the question. I needed a delay on an indefinite number of repetitions, where these examples appear to be finite.
-
Ben Murden almost 9 yearsI suppose I should be more specific and say the animation never ends if you have
repeatCount="indefinite"
- theend
event is never reached! I don't see a specific mention of a default on MDN, but I assume it is set to 1 if not defined. -
Kaiido almost 9 yearsWell actually it is ignored if the duration is set : specs but yes if repeatCount is set to
indefinite
,end
won't fire, ever. That's why I said "at the end of the finiterepeatCount
" -
Blue Lovag almost 3 yearsHello Kaiido, I don't see a repeat count in your example, why does the animation start itself again? In my case the animation doesn't.
-
Kaiido almost 3 years@BlueLovag as said in the answer, it uses the
end
event (op.end
) The syntax is [id of the animate element].end ensure you've set theid
correctly.