SVG animation delay on each repetition
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>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>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>